passbolt-styleguide 3.3.3 → 3.4.0-alpha2

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

@@ -0,0 +1,304 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {Trans, withTranslation} from "react-i18next";
+import {Link, withRouter} from "react-router-dom";
+import Tabs from "../../../react-extension/components/Common/Tab/Tabs";
+import Tab from "../../../react-extension/components/Common/Tab/Tab";
+import ConfigurePassphraseGenerator from "./ConfigurePassphraseGenerator";
+import ConfigurePasswordGenerator from "./ConfigurePasswordGenerator";
+import {SecretGenerator} from "../../../shared/lib/SecretGenerator/SecretGenerator";
+import {SecretGeneratorComplexity} from "../../../shared/lib/SecretGenerator/SecretGeneratorComplexity";
+import {withPrepareResourceContext} from "../../contexts/PrepareResourceContext";
+import Transition from "react-transition-group/cjs/Transition";
+
+class GeneratePasswordPage extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = this.defaultState;
+    this.initEventHandlers();
+  }
+
+  get defaultState() {
+    return {
+      password: "", // The password
+      isObfuscated: true, // True if the passphrase should not be visible
+      generator: {}, // The current password generator
+      copySecretState: "default",
+      processing: false
+    };
+  }
+
+  /**
+   * Whenever the component has been mounted
+   */
+  async componentDidMount() {
+    const type = this.props.prepareResourceContext.settings.default_generator;
+    const initialGenerator = this.generators.find(generator => generator.type === type);
+    await this.handleGeneratorChanged(initialGenerator);
+  }
+
+  /**
+   * Initialize the event handlers
+   */
+  initEventHandlers() {
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleViewPasswordToggle = this.handleViewPasswordToggle.bind(this);
+    this.handleGeneratePasswordButtonClick = this.handleGeneratePasswordButtonClick.bind(this);
+    this.handleGeneratorChanged = this.handleGeneratorChanged.bind(this);
+    this.handleCopyPassword = this.handleCopyPassword.bind(this);
+    this.handleGoBackClick = this.handleGoBackClick.bind(this);
+  }
+
+  /**
+   * Returns the possible generators
+   */
+  get generators() {
+    return  this.props.prepareResourceContext.settings.generators;
+  }
+
+  /**
+   * Handle when the generator configuration has changed
+   * @param generatorConfiguration The generator configuration
+   * @returns {Promise<void>}
+   */
+  async handleGeneratorChanged(generatorConfiguration) {
+    await this.setState({generator: generatorConfiguration});
+    this.generatePassword();
+  }
+
+  /**
+   * Handle when one wants to generate password
+   */
+  handleGeneratePasswordButtonClick() {
+    this.generatePassword();
+  }
+
+  /**
+   * Handle form input change.
+   * @params {ReactEvent} The react event.
+   */
+  handleInputChange(event) {
+    const target = event.target;
+    const value = target.value;
+    const name = target.name;
+    this.setState({
+      [name]: value
+    });
+  }
+
+  /**
+   * Handle view password button click.
+   */
+  handleViewPasswordToggle() {
+    if (this.state.processing) {
+      return;
+    }
+    this.setState({isObfuscated: !this.state.isObfuscated});
+  }
+
+  /**
+   * Handle the submission of the generated password.
+   * @params {ReactEvent} The react event
+   */
+  async handleSubmit(event) {
+    event.preventDefault();
+    await this.setState({processing: true});
+    await this.props.prepareResourceContext.onPasswordGenerated(this.state.password, this.state.generator);
+    this.props.history.goBack();
+  }
+
+  /**
+   * Whenever one wants to copy the password
+   */
+  async handleCopyPassword() {
+    this.setState({copySecretState: 'processing'});
+    await navigator.clipboard.writeText(this.state.password);
+    this.setState({copySecretState: 'done'});
+    setTimeout(() => {
+      this.setState({copySecretState: 'default'});
+    }, 3000);
+  }
+
+  /**
+   * Generate the password
+   */
+  generatePassword() {
+    const password = SecretGenerator.generate(this.state.generator);
+    this.setState({password});
+  }
+
+  handleGoBackClick(ev) {
+    ev.preventDefault();
+    this.props.history.goBack();
+  }
+
+  get translate() {
+    return this.props.t;
+  }
+
+  isPasswordEmpty() {
+    return this.state.password === "";
+  }
+
+  hasGeneratorName() {
+    return this.state.generator.name;
+  }
+
+  render() {
+    const passwordEntropy = SecretGenerator.entropy(this.state.password);
+    const passwordStrength = SecretGeneratorComplexity.strength(passwordEntropy);
+    /*
+     * The parser can't find the translation for passwordStrength.label
+     * To fix that we can use it in comment
+     * this.translate("n/a")
+     * this.translate("very weak")
+     * this.translate("weak")
+     * this.translate("fair")
+     * this.translate("strong")
+     * this.translate("very strong")
+     *
+     * The parser can't find the translation for generator.name
+     * To fix that we can use it in comment
+     * this.translate("Password")
+     * this.translate("Passphrase")
+     */
+    return (
+      <>
+        {!this.state.loading &&
+        <div className="generate-password">
+          <div className="back-link">
+            <a href="#" className="primary-action" onClick={this.handleGoBackClick}
+              title={this.translate("Cancel the operation")}>
+              <span className="icon fa">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                  <path d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/>
+                </svg>
+              </span>
+              <span className="primary-action-title"><Trans>Generate password</Trans></span>
+            </a>
+            <Link to="/data/quickaccess.html" className="secondary-action button-icon button"
+              title={this.translate("Cancel")}>
+              <span className="fa icon">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 352 512">
+                  <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"/>
+                </svg>
+              </span>
+              <span className="visually-hidden"><Trans>cancel</Trans></span>
+            </Link>
+          </div>
+          <form onSubmit={this.handleSubmit} noValidate>
+            <div className="form-container">
+              <div className="input text password">
+                <label htmlFor="password"><Trans>Password</Trans></label>
+                <input
+                  id="password"
+                  name="password"
+                  readOnly="readOnly"
+                  className="required"
+                  placeholder={this.translate("Password")}
+                  type={this.state.isObfuscated ? "password" : "text"}
+                  value={this.state.password}
+                  onChange={this.handleInputChange}
+                  disabled={this.state.processing}
+                  autoComplete="off"/>
+                <a onClick={this.handleViewPasswordToggle}
+                  className={`password-view button button-icon toggle ${this.state.isObfuscated ? "" : "selected"}`}>
+                  <span className="fa icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M569.354 231.631C512.969 135.949 407.81 72 288 72 168.14 72 63.004 135.994 6.646 231.631a47.999 47.999 0 0 0 0 48.739C63.031 376.051 168.19 440 288 440c119.86 0 224.996-63.994 281.354-159.631a47.997 47.997 0 0 0 0-48.738zM288 392c-75.162 0-136-60.827-136-136 0-75.162 60.826-136 136-136 75.162 0 136 60.826 136 136 0 75.162-60.826 136-136 136zm104-136c0 57.438-46.562 104-104 104s-104-46.562-104-104c0-17.708 4.431-34.379 12.236-48.973l-.001.032c0 23.651 19.173 42.823 42.824 42.823s42.824-19.173 42.824-42.823c0-23.651-19.173-42.824-42.824-42.824l-.032.001C253.621 156.431 270.292 152 288 152c57.438 0 104 46.562 104 104z" /></svg>
+                  </span>
+                  <span className="visually-hidden"><Trans>view</Trans></span>
+                </a>
+                <ul className="actions inline">
+                  <li>
+                    <a onClick={this.handleGeneratePasswordButtonClick} className="password-generate button">
+                      <span className="fa icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 96l16-32 32-16-32-16-16-32-16 32-32 16 32 16 16 32zM80 160l26.66-53.33L160 80l-53.34-26.67L80 0 53.34 53.33 0 80l53.34 26.67L80 160zm352 128l-26.66 53.33L352 368l53.34 26.67L432 448l26.66-53.33L512 368l-53.34-26.67L432 288zm70.62-193.77L417.77 9.38C411.53 3.12 403.34 0 395.15 0c-8.19 0-16.38 3.12-22.63 9.38L9.38 372.52c-12.5 12.5-12.5 32.76 0 45.25l84.85 84.85c6.25 6.25 14.44 9.37 22.62 9.37 8.19 0 16.38-3.12 22.63-9.37l363.14-363.15c12.5-12.48 12.5-32.75 0-45.24zM359.45 203.46l-50.91-50.91 86.6-86.6 50.91 50.91-86.6 86.6z" /></svg>
+                      </span>
+                      <span className="visually-hidden"><Trans>generate</Trans></span>
+                    </a>
+                  </li>
+                  <li>
+                    <a onClick={this.handleCopyPassword} className="copy-to-clipboard button">
+                      <span className="fa icon">
+                        <Transition in={this.state.copySecretState === "default"} appear={false} timeout={500}>
+                          {status => (
+                            <svg className={`transition fade-${status} ${this.state.copySecretState !== "default" ? "visually-hidden" : ""}`} xmlns="http://www.w3.org/2000/svg" width="1792" height="1792" viewBox="0 0 1792 1792"><path d="M768 1664h896v-640h-416q-40 0-68-28t-28-68v-416h-384v1152zm256-1440v-64q0-13-9.5-22.5t-22.5-9.5h-704q-13 0-22.5 9.5t-9.5 22.5v64q0 13 9.5 22.5t22.5 9.5h704q13 0 22.5-9.5t9.5-22.5zm256 672h299l-299-299v299zm512 128v672q0 40-28 68t-68 28h-960q-40 0-68-28t-28-68v-160h-544q-40 0-68-28t-28-68v-1344q0-40 28-68t68-28h1088q40 0 68 28t28 68v328q21 13 36 28l408 408q28 28 48 76t20 88z"/></svg>
+                          )}
+                        </Transition>
+                        <Transition in={this.state.copySecretState === "processing"} appear={true} timeout={500}>
+                          {status => (
+                            <svg className={`fade-${status} ${this.state.copySecretState !== "processing" ? "visually-hidden" : ""}`} width="22px" height="22px" viewBox="0 0 22 22" xmlns="http://www.w3.org/2000/svg"><g stroke="none" fill="none" ><g id="loading_white" transform="translate(2, 2)" strokeWidth="4"><circle id="Oval" stroke="#CCC" cx="9" cy="9" r="9" /></g><g id="loading_white" transform="translate(2, 2)" strokeWidth="2"><path d="M18,9 C18,4.03 13.97,0 9,0" id="Shape" stroke="#000"><animateTransform attributeName="transform" type="rotate" from="0 9 9" to="360 9 9" dur="0.35s" repeatCount="indefinite" /></path></g></g></svg>
+                          )}
+                        </Transition>
+                        <Transition in={this.state.copySecretState === "done"} appear={true} timeout={500}>
+                          {status => (
+                            <svg className={`fade-${status} ${this.state.copySecretState !== "done" ? "visually-hidden" : ""}`} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" viewBox="0 0 512 512"><path fill="currentColor" d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z" /></svg>
+                          )}
+                        </Transition>
+                      </span>
+                      <span className="visually-hidden"><Trans>copy</Trans></span>
+                    </a>
+                  </li>
+
+                </ul>
+                <div className={`password-complexity ${passwordStrength.id}`}>
+                  <span className="progress">
+                    <span className={`progress-bar ${passwordStrength.id}`} />
+                  </span>
+                  <span className="complexity-text">
+                    <div className="text--nowrap">
+                      <Trans>Complexity:</Trans> <strong>{this.translate(passwordStrength.label)}</strong>
+                    </div>
+                    <div>
+                      <Trans>Entropy:</Trans> <strong>{passwordEntropy.toFixed(1)} bits</strong>
+                    </div>
+                  </span>
+                </div>
+              </div>
+              {this.hasGeneratorName() &&
+              <Tabs activeTabName={this.state.generator.name}>
+                {this.generators.map(generator =>
+                  <Tab
+                    key={generator.name}
+                    name={generator.name}
+                    type={generator.type}
+                    onClick={() => this.handleGeneratorChanged(generator)}>
+                    {generator.type === "password" &&
+                    <ConfigurePasswordGenerator
+                      configuration={this.state.generator}
+                      onChanged={this.handleGeneratorChanged}/>
+                    }
+                    {generator.type === "passphrase" &&
+                    <ConfigurePassphraseGenerator
+                      configuration={this.state.generator}
+                      onChanged={this.handleGeneratorChanged}/>
+                    }
+                  </Tab>
+                )}
+              </Tabs>
+              }
+            </div>
+            <div className="submit-wrapper input">
+              <input
+                type="submit"
+                className={`button primary big full-width ${this.state.processing ? 'processing' : ''}`}
+                role="button"
+                disabled={this.state.processing || this.isPasswordEmpty()}
+                value={this.translate("Apply")} />
+            </div>
+          </form>
+        </div>
+        }
+      </>
+    );
+  }
+}
+
+GeneratePasswordPage.propTypes = {
+  prepareResourceContext: PropTypes.any, // The password generator context
+  history: PropTypes.any, // The history router
+  t: PropTypes.func, // The translation function
+};
+
+export default withRouter(withPrepareResourceContext(withTranslation('common')(GeneratePasswordPage)));

package/src/react-quickaccess/components/GeneratePasswordPage/GeneratePasswordPage.test.data.js

@@ -0,0 +1,102 @@
+/**
+ * Default props
+ * @returns {*}
+ */
+export function defaultProps() {
+  return {
+    prepareResourceContext: {
+      settings: {
+        default_generator: "passphrase",
+        generators: [
+          {
+            "name": "Password",
+            "type": "password",
+            "default_options":{
+              "length": 18,
+              "look_alike": true,
+              "min_length": 8,
+              "max_length": 128,
+            },
+            "masks": [
+              {
+                "name": "upper",
+                "label": "A-Z",
+                "characters": "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+                "active": true
+              },
+              {
+                "name": "lower",
+                "label": "a-z",
+                "characters": "abcdefghijklmnopqrstuvwxyz",
+                "active": true
+              },
+              {
+                "name": "digit",
+                "label": "0-9",
+                "characters": "0123456789",
+                "active": true
+              },
+              {
+                "name": "special_char1",
+                "label": "# $ % & @ ^ ~",
+                "characters": "#$%&@^~",
+                "active": true
+              },
+              {
+                "name": "parenthesis",
+                "label": "{ [ ( | ) ] ] }",
+                "characters": "([|])",
+                "active": true
+              },
+              {
+                "name": "special_char2",
+                "label": ". , : ;",
+                "characters": ".,:;",
+                "active": true
+              },
+              {
+                "name": "special_char3",
+                "label": "' \" `",
+                "characters": "'\"`",
+                "active": true
+              },
+              {
+                "name": "special_char4",
+                "label": "/ \\ _ -",
+                "characters": "/\\_-",
+                "active": true
+              },
+              {
+                "name": "special_char5",
+                "label": "< * + ! ? =",
+                "characters": "<*+!?=",
+                "active": true
+              },
+              {
+                "name": "emoji",
+                "label": "😘",
+                "characters": "😀😃😄😁😆😅😂🤣🥲☺️😊😇🙂🙃😉😌😍🥰😘😗😙😚😋😛😝😜🤪🤨🧐🤓😎🥸🤩🥳😏😒😞😔😟😕🙁☹️😣😖😫😩🥺😢😭😤😠😡🤬🤯😳🥵🥶😱😨😰😥😓🤗🤔🤭🤫🤥😶😐😑😬🙄😯😦😧😮😲🥱😴🤤😪😵🤐🥴🤢🤮🤧😷🤒🤕🤑🤠😈👿👹👺🤡💩👻💀☠️👽👾🤖🎃😺😸😹😻😼😽🙀😿😾"
+              }
+            ],
+          },
+          {
+            "name": "Passphrase",
+            "type": "passphrase",
+            "default_options":{
+              "word_count": 8,
+              "word_case": "lowercase",
+              "min_word": 4,
+              "max_word": 40,
+              "separator": " "
+            },
+          }
+        ]
+      },
+      onPasswordGenerated: jest.fn()
+    },
+    history: {
+      push: jest.fn(),
+      goBack: jest.fn()
+    }
+  };
+}

package/src/react-quickaccess/components/GeneratePasswordPage/GeneratePasswordPage.test.js

@@ -0,0 +1,76 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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) 2020 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
+ */
+
+/**
+ * Unit tests on GeneratePasswordPage in regard of specifications
+ */
+import {defaultProps} from "./GeneratePasswordPage.test.data";
+import GeneratePasswordTestPage from "./GeneratePasswordPage.test.page";
+import "../../../react-extension/test/lib/crypto/cryptoGetRandomvalues";
+
+beforeEach(() => {
+  jest.resetModules();
+});
+
+describe("Generate password", () => {
+  let page; // The page to test against
+  let props = null; // The page props
+
+  beforeEach(() => {
+    props = defaultProps(); // The props to pass
+    page = new GeneratePasswordTestPage(props);
+  });
+
+  describe('As LU I should generate a password', () => {
+    it('As LU I should apply a generated password', async() => {
+      expect(page.title).toBe('Generate password');
+      expect(page.complexityText).toBe('Complexity: fairEntropy: 103.6 bits');
+      await page.applyGeneratePassword();
+      expect(props.prepareResourceContext.onPasswordGenerated).toHaveBeenCalledWith(page.password, props.prepareResourceContext.settings.generators[1]);
+      expect(props.history.goBack).toHaveBeenCalled();
+    });
+
+    it('As LU I should generate a new password', async() => {
+      const password = page.password;
+      await page.generatePassword();
+      // TODO random value return always the same value
+      expect(password === page.password).toBeTruthy();
+    });
+
+    it('As LU I should copy a password', async() => {
+      const mockClipboard = {
+        writeText: jest.fn()
+      };
+      global.navigator.clipboard = mockClipboard;
+      await page.copyPassword();
+      expect(navigator.clipboard.writeText).toHaveBeenCalledWith(page.password);
+    });
+  });
+
+  describe('As LU I should choose to use password configuration', () => {
+    it('AS LU I should be able to use password configuration', async() => {
+      await page.usePasswordGenerator();
+      expect(page.activeTab).toBe('Password');
+    });
+  });
+
+  describe('AS LU I should not perform actions during the apply password', () => {
+    it('AS LU I should not re-submit during the apply password', async() => {
+      const inProgressFn = () => {
+        expect(page.canSubmit).toBeFalsy();
+      };
+      await page.applyGeneratePassword(inProgressFn);
+    });
+  });
+});

package/src/react-quickaccess/components/GeneratePasswordPage/GeneratePasswordPage.test.page.js

@@ -0,0 +1,158 @@
+
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2020 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) 2020 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 {fireEvent, render, waitFor} from "@testing-library/react";
+import React from "react";
+import {BrowserRouter as Router} from "react-router-dom";
+import MockTranslationProvider
+  from "../../../react-extension/test/mock/components/Internationalisation/MockTranslationProvider";
+import GeneratePasswordPage from "./GeneratePasswordPage";
+
+/**
+ * The GeneratePasswordPage component represented as a page
+ */
+export default class GeneratePasswordTestPage {
+  /**
+   * Default constructor
+   * @param props Props to attach
+   */
+  constructor(props) {
+    this._page = render(
+      <Router>
+        <MockTranslationProvider>
+          <GeneratePasswordPage.WrappedComponent {...props}/>
+        </MockTranslationProvider>
+      </Router>
+    );
+  }
+
+  /**
+   * Get the title
+   */
+  get title() {
+    return this._page.container.querySelector('.primary-action-title').textContent;
+  }
+
+  /**
+   * Returns the password value
+   */
+  get password() {
+    return this._page.container.querySelector('.input.text.password input').value;
+  }
+
+  /**
+   * Returns the generate password button
+   */
+  get generatePasswordButton() {
+    return this._page.container.querySelector('.password-generate.button');
+  }
+
+  /**
+   * Returns the toggle password button
+   */
+  get toggleViewPasswordButton() {
+    return this._page.container.querySelector('.password-view.button');
+  }
+
+  /**
+   * Returns the copy password button
+   */
+  get copyPasswordButton() {
+    return this._page.container.querySelector('.copy-to-clipboard.button');
+  }
+
+  /**
+   * Returns the complexity of a password
+   */
+  get complexityText() {
+    return this._page.container.querySelector('.complexity-text').textContent;
+  }
+
+  /**
+   * Returns the active tab
+   */
+  get activeTab() {
+    return this._page.container.querySelector('.tab.active a').textContent;
+  }
+
+  /**
+   * Returns the tab
+   * @param index
+   * @returns {*}
+   */
+  tab(index) {
+    return this._page.container.querySelectorAll('.tab')[index - 1].querySelector('.tab-link');
+  }
+
+  /**
+   * Returns true it one can submit the apply operation
+   */
+  get canSubmit() {
+    return this._page.container.querySelector('input[type="submit"]').getAttribute('disabled') !== '';
+  }
+
+  /**
+   * Returns the apply button element
+   */
+  get applyButton() {
+    return this._page.container.querySelector('input[type=\"submit\"]');
+  }
+
+  /**
+   * Generate a new password
+   */
+  async generatePassword() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.generatePasswordButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Toggle to show or hide password
+   */
+  async toggleViewPassword() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.toggleViewPasswordButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Copy password
+   */
+  async copyPassword() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.copyPasswordButton, leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * use password generator
+   */
+  async usePasswordGenerator() {
+    const leftClick = {button: 0};
+    fireEvent.click(this.tab(1), leftClick);
+    await waitFor(() => {});
+  }
+
+  /**
+   * Apply generate password
+   * @param inProgressFn Function called while we wait for React stability
+   */
+  async applyGeneratePassword(inProgressFn = () => {}) {
+    const leftClick = {button: 0};
+    fireEvent.click(this.applyButton, leftClick);
+    await waitFor(inProgressFn);
+  }
+}

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

@@ -36,14 +36,16 @@ class Header extends React.Component {
           </a>
         </h1>
         {this.props.context.isAuthenticated &&
-          <a role="button" className={`option-link button button-icon`} onClick={this.handleLogoutClick} title={this.translate("logout")}>
-            <span className="visually-hidden"><Trans>logout</Trans></span>
-            <span className="fa icon">
-              <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="power-off" className="svg-inline--fa fa-power-off fa-w-16" role="img" viewBox="0 0 512 512">
-                <path fill="currentColor" d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" />
-              </svg>
-            </span>
-          </a>
+          <span>
+            <a role="button" className={`option-link button button-icon`} onClick={this.handleLogoutClick} title={this.translate("logout")}>
+              <span className="visually-hidden"><Trans>logout</Trans></span>
+              <span className="fa icon">
+                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="power-off" className="svg-inline--fa fa-power-off fa-w-16" role="img" viewBox="0 0 512 512">
+                  <path fill="currentColor" d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" />
+                </svg>
+              </span>
+            </a>
+          </span>
         }
       </div>
     );