passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.js

@@ -15,8 +15,10 @@ import React, {Component} from "react";
 import PropTypes from "prop-types";
 import {withAppContext} from "../../../contexts/AppContext";
 import UserAbortsOperationError from "../../../lib/Error/UserAbortsOperationError";
-import Icon from "../../Common/Icons/Icon";
 import {Trans, withTranslation} from "react-i18next";
+import Password from "../../../../shared/components/Password/Password";
+import DialogWrapper from "../../Common/Dialog/DialogWrapper/DialogWrapper";
+import Select from "../../Common/Select/Select";
 
 class InputPassphrase extends Component {
   constructor(props) {
@@ -27,6 +29,7 @@ class InputPassphrase extends Component {
   }
 
   componentDidMount() {
+    this.focusOnPassphrase();
     // Init the default remember me duration based on the remember me options given in options.
     if (this.hasRememberMeOptions()) {
       const rememberMeOptions = this.props.context.siteSettings.getRememberMeOptions();
@@ -43,9 +46,7 @@ class InputPassphrase extends Component {
       passphrase: "",
       rememberMe: false,
       passphraseError: "",
-      rememberMeDuration: 0,
-      passphraseInputHasFocus: true,
-      isObfuscated: true, // True if the passphrase should not be visible
+      rememberMeDuration: 300,
     };
   }
 
@@ -53,11 +54,7 @@ class InputPassphrase extends Component {
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
     this.handleInputChange = this.handleInputChange.bind(this);
     this.handleRememberMeDurationSelectChange = this.handleRememberMeDurationSelectChange.bind(this);
-    this.handlePassphraseInputFocus = this.handlePassphraseInputFocus.bind(this);
-    this.handlePassphraseInputBlur = this.handlePassphraseInputBlur.bind(this);
-    this.handleKeyDown = this.handleKeyDown.bind(this);
     this.handleCloseClick = this.handleCloseClick.bind(this);
-    this.handleToggleObfuscate = this.handleToggleObfuscate.bind(this);
   }
 
   /**
@@ -65,7 +62,13 @@ class InputPassphrase extends Component {
    */
   createInputRef() {
     this.passphraseInputRef = React.createRef();
-    this.rememberMeDurationSelectRef = React.createRef();
+  }
+
+  /**
+   * Put the focus on the passphrase input
+   */
+  focusOnPassphrase() {
+    this.passphraseInputRef.current.focus();
   }
 
   /**
@@ -85,18 +88,6 @@ class InputPassphrase extends Component {
     this.close();
   }
 
-  /**
-   * Handle key down on the component.
-   * @params {ReactEvent} The react event
-   */
-  handleKeyDown(event) {
-    // Close the dialog when the user presses the "ESC" key.
-    if (event.keyCode === 27) {
-      event.stopPropagation();
-      this.close();
-    }
-  }
-
   /**
    * Handle form submit event.
    * @params {ReactEvent} The react event
@@ -156,15 +147,24 @@ class InputPassphrase extends Component {
    * Handle invalid passphrase.
    */
   handleInvalidPassphrase() {
-    const attempt = this.state.attempt + 1;
+    const isPassphraseEmpty = this.state.passphrase === "";
+    const passphraseError = isPassphraseEmpty
+      ? this.translate("The passphrase should not be empty.")
+      : this.translate("This is not a valid passphrase.");
+
+    let attempt = this.state.attempt;
+    if (!isPassphraseEmpty) {
+      attempt++;
+    }
+
     this.setState({
       processing: false,
       attempt: attempt,
-      passphraseError: this.translate("This is not a valid passphrase.")
+      passphraseError: passphraseError
     });
     if (attempt < 3) {
       // Force the passphrase input focus. The autoFocus attribute only works during the first rendering.
-      this.passphraseInputRef.current.focus();
+      this.focusOnPassphrase();
     }
   }
 
@@ -188,92 +188,21 @@ class InputPassphrase extends Component {
   handleRememberMeDurationSelectChange(event) {
     this.setState({
       rememberMe: true,
-      rememberMeDuration: parseInt(event.target.value)
+      rememberMeDuration: event.target.value
     });
   }
 
-  /**
-   * Handle passphrase input focus.
-   */
-  handlePassphraseInputFocus() {
-    const passphraseInputHasFocus = true;
-    this.setState({passphraseInputHasFocus: passphraseInputHasFocus});
-  }
-
-  /**
-   * Handle passphrase input blur.
-   */
-  handlePassphraseInputBlur() {
-    const passphraseInputHasFocus = false;
-    this.setState({passphraseInputHasFocus: passphraseInputHasFocus});
-  }
-
-  /**
-   * Get the passphrase input style.
-   * @return {Object}
-   */
-  getPassphraseInputStyle() {
-    if (this.state.passphraseInputHasFocus) {
-      const backgroundColor = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-      const textColor = this.props.context.userSettings.getSecurityTokenTextColor();
-
-      return {
-        background: backgroundColor,
-        color: textColor
-      };
-    }
-
-    return {
-      background: "",
-      color: "",
-    };
-  }
-
-  /**
-   * Get the security token style.
-   * @return {Object}
-   */
-  getSecurityTokenStyle() {
-    const backgroundColor = this.props.context.userSettings.getSecurityTokenBackgroundColor();
-    const textColor = this.props.context.userSettings.getSecurityTokenTextColor();
-
-    if (this.state.passphraseInputHasFocus) {
-      return {
-        background: textColor,
-        color: backgroundColor,
-      };
-    }
-
-    return {
-      background: backgroundColor,
-      color: textColor,
-    };
-  }
-
-  /**
-   * Whenever one wants to toggle the obfusctated mode
-   */
-  handleToggleObfuscate() {
-    this.toggleObfuscate();
-  }
-
-  /**
-   * Toggle the obfuscate mode of the passphrase view
-   */
-  toggleObfuscate() {
-    this.setState({isObfuscated: !this.state.isObfuscated});
-  }
 
   /**
    * Render the remember me options
-   * @return {array<JSX>}
+   * @returns {*[]}
    */
   renderRememberMeOptions() {
     const selectOptions = [];
     const rememberMeOptions = this.props.context.siteSettings.getRememberMeOptions();
 
     for (const time in rememberMeOptions) {
-      selectOptions.push(<option value={time} key={time}>{rememberMeOptions[time]}</option>);
+      selectOptions.push({value: parseInt(time), label: rememberMeOptions[time]});
     }
 
     return selectOptions;
@@ -292,9 +221,6 @@ class InputPassphrase extends Component {
    * @returns {JSX}
    */
   render() {
-    const passphraseStyle = this.getPassphraseInputStyle();
-    const securityTokenStyle = this.getSecurityTokenStyle();
-    const securityTokenCode = this.props.context.userSettings.getSecurityTokenCode();
     let passphraseInputLabel = this.translate("You need your passphrase to continue.");
     if (this.state.passphraseError) {
       passphraseInputLabel = this.translate("Please enter a valid passphrase.");
@@ -302,90 +228,57 @@ class InputPassphrase extends Component {
     const hasRememberMeOptions = this.hasRememberMeOptions();
 
     return (
-      <div className="dialog-wrapper" onKeyDown={this.handleKeyDown}>
-        <div className="dialog passphrase-entry">
-          <div className="dialog-header">
-            <h2><Trans>Please enter your passphrase.</Trans></h2>
-            <a className="dialog-close" onClick={this.handleCloseClick}>
-              <Icon name="close"/>
-              <span className="visually-hidden">cancel</span>
-            </a>
-          </div>
-          {this.state.attempt < 3 &&
-          <div className="dialog-content">
-            <form onSubmit={this.handleFormSubmit}>
-              <div className="form-content">
-                <div className={`input text password required ${this.state.passphraseError ? "error" : ""}`}>
-                  <label htmlFor="passphrase-entry-form-passphrase">{passphraseInputLabel}</label>
-                  <input
-                    id="passphrase-entry-form-passphrase"
-                    type={this.state.isObfuscated ? "password" : "text"}
-                    name="passphrase"
-                    placeholder={this.translate("Passphrase")}
-                    required="required" ref={this.passphraseInputRef}
-                    className={`required ${this.state.passphraseError ? "error" : ""}`}
-                    value={this.state.passphrase}
-                    autoFocus={true}
-                    onFocus={this.handlePassphraseInputFocus}
-                    onBlur={this.handlePassphraseInputBlur}
-                    onChange={this.handleInputChange}
-                    disabled={this.state.processing}
-                    style={passphraseStyle}
-                    autoComplete="off"
-                  />
-                  <a
-                    className={`password-view button-icon button button-toggle ${this.state.isObfuscated ? "" : "selected"}`}
-                    role="button"
-                    onClick={this.handleToggleObfuscate}>
-                    <Icon name="eye-open"/>
-                    <span className="visually-hidden">view</span>
-                  </a>
-                  <div className="security-token"
-                    style={securityTokenStyle}>{securityTokenCode}
-                  </div>
-
-                </div>
-                {this.state.passphraseError &&
-                <div className="input text">
-                  <div className="error-message">{this.state.passphraseError}</div>
-                </div>
-                }
-                {hasRememberMeOptions &&
-                <div>
+      <DialogWrapper className="passphrase-entry"  title={this.translate("Please enter your passphrase.")} onClose={this.handleCloseClick}>
+        {this.state.attempt < 3 &&
+          <form onSubmit={this.handleFormSubmit}>
+            <div className="form-content">
+              <div className={`input-password-wrapper input required ${this.state.passphraseError ? "error" : ""}`}>
+                <label htmlFor="passphrase-entry-form-passphrase">{passphraseInputLabel}</label>
+                <Password
+                  id="passphrase-entry-form-passphrase"
+                  name="passphrase"
+                  autoComplete="off"
+                  placeholder={this.translate("Passphrase")}
+                  inputRef={this.passphraseInputRef}
+                  value={this.state.passphrase}
+                  onChange={this.handleInputChange}
+                  disabled={this.state.processing}
+                  preview={true}
+                  securityToken={this.props.context.userSettings.getSecurityToken()}
+                />
+              </div>
+              {this.state.passphraseError &&
+                <div className="error-message">{this.state.passphraseError}</div>
+              }
+              {hasRememberMeOptions &&
+                <div className="remember-me">
                   <div className="input checkbox">
                     <input id="passphrase-entry-form-remember-me" type="checkbox" name="rememberMe"
                       checked={this.state.rememberMe} onChange={this.handleInputChange}/>
                     <label htmlFor="passphrase-entry-form-remember-me"><Trans>Remember it for</Trans> </label>
                   </div>
-                  <div className="input select">
-                    <select name="rememberMeDuration" value={this.state.rememberMeDuration}
-                      onChange={this.handleRememberMeDurationSelectChange}
-                      ref={this.rememberMeDurationSelectRef}>
-                      {this.renderRememberMeOptions()}
-                    </select>
-                  </div>
+                  <Select className="inline" name="rememberMeDuration" items={this.renderRememberMeOptions()} value={this.state.rememberMeDuration}
+                    onChange={this.handleRememberMeDurationSelectChange}/>
                 </div>
-                }
-              </div>
-              <div className="submit-wrapper clearfix">
-                <input type="submit" className="button primary" role="button" value={this.translate("OK")}/>
-                <a className="cancel" onClick={this.handleCloseClick}><Trans>Cancel</Trans></a>
-              </div>
-            </form>
-          </div>
-          }
-          {this.state.attempt === 3 &&
-          <div className="dialog-content">
+              }
+            </div>
+            <div className="submit-wrapper clearfix">
+              <a className="cancel" onClick={this.handleCloseClick}><Trans>Cancel</Trans></a>
+              <button type="submit" className="button primary" role="button"><Trans>OK</Trans></button>
+            </div>
+          </form>
+        }
+        {this.state.attempt === 3 &&
+          <>
             <div className="form-content">
-              <Trans>Your passphrase is wrong! The operation has been aborted.</Trans>
+              <p><Trans>Your passphrase is wrong! The operation has been aborted.</Trans></p>
             </div>
             <div className="submit-wrapper clearfix">
               <a className="button primary" role="button" onClick={this.handleCloseClick}><Trans>Close</Trans></a>
             </div>
-          </div>
-          }
-        </div>
-      </div>
+          </>
+        }
+      </DialogWrapper>
     );
   }
 }

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.test.js

@@ -71,12 +71,14 @@ describe("InputPassphrase", () => {
     expect(dialogLabel.textContent).toBe("You need your passphrase to continue.");
 
     // Passphrase input field exists.
+    const passphraseWrapper = container.querySelector(".input.password");
     const passphraseInput = container.querySelector("[type=\"password\"][name=\"passphrase\"]");
     expect(passphraseInput).not.toBeNull();
     // Is focus.
     expect(passphraseInput).toBe(document.activeElement);
     // Has the expected style.
-    const passphraseInputStyle = window.getComputedStyle(passphraseInput);
+    const passphraseInputStyle = window.getComputedStyle(passphraseWrapper);
+
     expect(passphraseInputStyle.background).toBe("rgb(0, 0, 0)");
     expect(passphraseInputStyle.color).toBe("rgb(255, 255, 255)");
 
@@ -95,11 +97,11 @@ describe("InputPassphrase", () => {
     expect(rememberMeInput.checked).toBe(false);
 
     // Remember me duration options exists.
-    const rememberMeDurationSelect = container.querySelector("[name=\"rememberMeDuration\"]");
+    const rememberMeDurationSelect = container.querySelector(".select-container .select");
     expect(rememberMeDurationSelect).not.toBeNull();
     const rememberMeOptions = context.siteSettings.getRememberMeOptions();
-    Object.keys(rememberMeOptions).forEach(optionKey => {
-      const rememberMeDurationOption = container.querySelector(`option[value="${optionKey}"]`);
+    Object.keys(rememberMeOptions).forEach((optionKey, index) => {
+      const rememberMeDurationOption = index === 0 ? container.querySelector(".select-container .select .selected-value .value") : container.querySelectorAll(".select-container .select .option")[index - 1];
       expect(rememberMeDurationOption).not.toBeNull();
       expect(rememberMeDurationOption.textContent).toBe(rememberMeOptions[optionKey]);
     });
@@ -164,6 +166,7 @@ describe("InputPassphrase", () => {
   it("changes the style of its security token when the passphrase input get or lose focus.", () => {
     const {container} = renderInputPassphrase();
 
+    const passphraseWrapper = container.querySelector(".input.password");
     const passphraseInput = container.querySelector("[name=\"passphrase\"]");
     const securityTokenElement = container.querySelector(".security-token");
 
@@ -173,7 +176,7 @@ describe("InputPassphrase", () => {
      */
     fireEvent.focus(passphraseInput);
     let securityTokenStyle = window.getComputedStyle(securityTokenElement);
-    let passphraseInputStyle = window.getComputedStyle(passphraseInput);
+    let passphraseInputStyle = window.getComputedStyle(passphraseWrapper);
     expect(passphraseInputStyle.background).toBe("rgb(0, 0, 0)");
     expect(passphraseInputStyle.color).toBe("rgb(255, 255, 255)");
     expect(securityTokenStyle.background).toBe("rgb(255, 255, 255)");
@@ -322,10 +325,13 @@ describe("InputPassphrase", () => {
     fireEvent.click(rememberMeInput, leftClick);
 
     // Select a remember me duration.
-    const rememberMeDurationSelect = container.querySelector("[name=\"rememberMeDuration\"]");
-    // Simulate change event, the click on the option does not trigger the onChange event.
-    fireEvent.change(rememberMeDurationSelect, {target: {value: "1800"}});
-
+    const rememberMeDurationSelect = container.querySelector(".select-container .select .selected-value");
+    // The click on the select.
+    fireEvent.click(rememberMeDurationSelect, leftClick);
+    // Get the second select item in the list.
+    const secondSelectItem = container.querySelectorAll(".select-container .select .option")[1];
+    // The click on the second select item.
+    fireEvent.click(secondSelectItem, leftClick);
     // Submit.
     const submitButton = container.querySelector(".submit-wrapper [type=\"submit\"]");
     fireEvent.click(submitButton, leftClick);

package/src/react-extension/components/AuthenticationPassphrase/InputPassphrase/InputPassphrase.test.stories.js

@@ -2,23 +2,21 @@ import React from "react";
 import {MemoryRouter, Route} from "react-router-dom";
 import InputPassphrase from "./InputPassphrase";
 import AppContext from "../../../contexts/AppContext";
+import SiteSettings from "../../../../shared/lib/Settings/SiteSettings";
+import siteSettingsFixture from "../../../test/fixture/Settings/siteSettings";
 
 
 export default {
-  title: 'Passbolt/AuthenticationLogin/InputPassphrase',
+  title: 'Passbolt/AuthenticationPassphrase/InputPassphrase',
   component: InputPassphrase
 };
 
 const context = {
   userSettings: {
-    getTrustedDomain: () => 'some url',
-    getSecurityTokenBackgroundColor: () => '#a85632',
-    getSecurityTokenTextColor: () => '#ffffff',
-    getSecurityTokenCode: () => "ABC",
+    getTrustedDomain: () => (new URL(window.location.href)).origin,
+    getSecurityToken: () => ({backgroundColor: '#a85632', code: "ABC", textColor: '#ffffff'}),
   },
-  siteSettings: {
-    getRememberMeOptions: () => true
-  }
+  siteSettings: new SiteSettings(siteSettingsFixture)
 };
 
 

package/src/react-extension/components/AuthenticationRecover/OrchestrateApiRecover/OrchestrateApiRecover.js

@@ -19,6 +19,8 @@ import InstallExtension from "../../Authentication/InstallExtension/InstallExten
 import DisplayBrowserNotSupported from "../../Authentication/DisplayBrowserNotSupported/DisplayBrowserNotSupported";
 import DisplayRequireInvitationError from "../../Authentication/DisplayRequireInvitationError/DisplayRequireInvitationError";
 import DisplayExpiredTokenError from "../../Authentication/DisplayExpiredTokenError/DisplayExpiredTokenError";
+import DisplayAlreadyLoggedInError, {DisplayAlreadyLoggedInErrorVariations} from "../../Authentication/DisplayAlreadyLoggedInError/DisplayAlreadyLoggedInError";
+import DisplayUnexpectedError from "../../Authentication/DisplayUnexpectedError/DisplayUnexpectedError";
 
 /**
  * The component orchestrates the api recover authentication workflow.
@@ -50,8 +52,17 @@ class OrchestrateApiRecover extends Component {
         return <DisplayBrowserNotSupported/>;
       case ApiRecoverContextState.TOKEN_EXPIRED_STATE:
         return <DisplayExpiredTokenError/>;
-      case ApiRecoverContextState.ERROR_STATE:
+      case ApiRecoverContextState.ERROR_ALREADY_SIGNED_IN_STATE:
+        return <DisplayAlreadyLoggedInError
+          onLogoutButtonClick={this.props.apiRecoverContext.logoutUserAndRefresh}
+          displayAs={DisplayAlreadyLoggedInErrorVariations.RECOVER}
+        />;
+      case ApiRecoverContextState.REQUEST_INVITATION_ERROR:
         return <DisplayRequireInvitationError/>;
+      case ApiRecoverContextState.UNEXPECTED_ERROR_STATE:
+        return <DisplayUnexpectedError
+          error={this.props.apiRecoverContext.unexpectedError}
+        />;
       default:
         return <LoadingSpinner/>;
     }