passbolt-styleguide 3.5.3 → 3.6.0-beta1

package/src/react-extension/components/Common/TextField/TextField.test.stories.js

@@ -0,0 +1,361 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.6.0
+ */
+import React from "react";
+import Icon from "../../../../shared/components/Icons/Icon";
+import {defaultProps} from "../../../../shared/components/Password/Password.test.data";
+import Password from "../../../../shared/components/Password/Password";
+import PasswordComplexity from "../../../../shared/components/PasswordComplexity/PasswordComplexity";
+
+export default {
+  title: 'Passbolt/Common/TextField',
+  component: "TextField"
+};
+
+
+const Template = () =>
+  <div style={{display: "flex", flexWrap: "wrap"}}>
+    <span style={{width: "100%", marginBottom: ".5rem"}}>TextField</span>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text required">
+        <label htmlFor="input1">Label</label>
+        <input id="input1" type="text" placeholder='Placeholder' required="required" disabled={false}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text required error">
+        <label htmlFor="input4">Label</label>
+        <input id="input4" type="text" placeholder='Placeholder' required="required" disabled={false}/>
+        <div className="error-message">Error message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text required disabled">
+        <label htmlFor="input2">Label</label>
+        <input id="input2" type="text" placeholder='Placeholder' value="Value" required="required" disabled={true}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text required disabled">
+        <label htmlFor="input3">Label</label>
+        <input id="input3" type="text" placeholder='Placeholder' required="required" disabled={true}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text">
+        <label htmlFor="input5">Label</label>
+        <input id="input5" type="text" placeholder='Placeholder' disabled={false}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text">
+        <label htmlFor="input6">Label</label>
+        <input id="input6" type="text" placeholder='Placeholder' disabled={false}/>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text disabled">
+        <label htmlFor="input7">Label</label>
+        <input id="input7" type="text" placeholder='Placeholder' value="Value" disabled={true}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input text disabled">
+        <label htmlFor="input8">Label</label>
+        <input id="input8" type="text" placeholder='Placeholder' disabled={true}/>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <span style={{width: "100%", marginBottom: ".5rem"}}>In field number</span>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <input className="in-field" type="number" defaultValue={389} required="required" disabled={false}/>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <input className="in-field" type="number" defaultValue={389} required="required" disabled={true}/>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <input type="number" defaultValue={389} required="required" disabled={false}/>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <input type="number" defaultValue={389} required="required" disabled={true}/>
+    </div>
+    <span style={{width: "100%", marginBottom: ".5rem"}}>Import file field</span>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input file required">
+        <input type="file"/>
+        <label>Select a File</label>
+        <div className="input-file-inline">
+          <input type="text" disabled={true} placeholder="Placeholder"/>
+          <button className="button primary">
+            <span>Select a file</span>
+          </button>
+        </div>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input file required error">
+        <input type="file"/>
+        <label>Select a File</label>
+        <div className="input-file-inline">
+          <input type="text" disabled={true} placeholder="Placeholder"/>
+          <button className="button primary">
+            <span>Select a file</span>
+          </button>
+        </div>
+        <div className="error-message">Error message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input file required disabled">
+        <input type="file"/>
+        <label>Select a File</label>
+        <div className="input-file-inline">
+          <input type="text" disabled={true} value="Value" placeholder="Placeholder"/>
+          <button className="button primary" disabled={true}>
+            <span>Select a file</span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input file required disabled">
+        <input type="file"/>
+        <label>Select a File</label>
+        <div className="input-file-inline">
+          <input type="text" disabled={true} placeholder="Placeholder"/>
+          <button className="button primary" disabled={true}>
+            <span>Select a file</span>
+          </button>
+        </div>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <span style={{width: "100%", marginBottom: ".5rem"}}>Textarea</span>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea">
+        <label htmlFor="textarea1">
+          Description
+          <Icon name="lock"/>
+        </label>
+        <textarea id="textarea1" placeholder="Add a description" disabled={false}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea">
+        <label htmlFor="textarea2">
+          Description
+          <Icon name="lock"/>
+        </label>
+        <textarea id="textarea2" placeholder="Add a description" disabled={false}/>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea">
+        <label htmlFor="textarea3">
+          Description
+          <Icon name="lock"/>
+        </label>
+        <textarea id="textarea3" placeholder="Add a description" defaultValue="Value" disabled={true}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea">
+        <label htmlFor="textarea4">
+          Description
+          <Icon name="lock"/>
+        </label>
+        <textarea id="textarea4" placeholder="Add a description" disabled={true}/>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea required">
+        <label htmlFor="textarea5">Label</label>
+        <textarea id="textarea5" placeholder="Placeholder" disabled={false}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea required error">
+        <label htmlFor="textarea6">Label</label>
+        <textarea id="textarea6" placeholder="Placeholder" disabled={false}/>
+        <div className="error-message">Error message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea required">
+        <label htmlFor="textarea7">Label</label>
+        <textarea id="textarea7" placeholder="Placeholder" defaultValue="Value" disabled={true}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input textarea required">
+        <label htmlFor="textarea8">Label</label>
+        <textarea id="textarea8" placeholder="Placeholder" disabled={true}/>
+      </div>
+    </div>
+    <span style={{width: "100%", marginBottom: ".5rem"}}>Passphrase Field</span>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="passphrase-1">Passphrase</label>
+        <Password {...defaultProps({id: "passphrase-1"})}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required disabled">
+        <label htmlFor="passphrase-2">Passphrase</label>
+        <Password {...defaultProps({id: "passphrase-2", disabled: true})}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required error">
+        <label htmlFor="passphrase-3">Passphrase</label>
+        <Password {...defaultProps({id: "passphrase-3"})}/>
+        <div className="error-message">Error message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="passphrase-4">Passphrase</label>
+        <Password {...defaultProps({id: "passphrase-4"})}/>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+    <span style={{width: "100%", marginBottom: ".5rem"}}>Password Field</span>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="password-1">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-1", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={0}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required disabled">
+        <label htmlFor="password-2">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-2", placeholder: "Password", securityToken: false, disabled: true})}/>
+          <a className="button button-icon disabled">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon disabled">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={29.9}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="password-3">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-3", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={49.9}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="password-4">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-4", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={83.2}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="password-5">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-5", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={117.98}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="password-6">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-6", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={158.7}/>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input error required">
+        <label htmlFor="password-7">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-7", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={0} error={true}/>
+        <div className="error-message">Error message</div>
+      </div>
+    </div>
+    <div style={{width: "24%", marginRight: "1%"}}>
+      <div className="input-password-wrapper input required">
+        <label htmlFor="password-8">Password</label>
+        <div className="password-button-inline">
+          <Password {...defaultProps({id: "password-8", placeholder: "Password", securityToken: false})}/>
+          <a className="button button-icon">
+            <Icon name='dice'/>
+          </a>
+          <a className="button button-icon">
+            <Icon name='settings'/>
+          </a>
+        </div>
+        <PasswordComplexity entropy={0}/>
+        <div className="help-message">Help message</div>
+      </div>
+    </div>
+  </div>;
+
+export const Default = Template.bind({});

package/src/react-extension/components/Common/Toggle/Toggle.test.stories.js

@@ -0,0 +1,54 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.6.0
+ */
+import React from "react";
+
+export default {
+  title: 'Passbolt/Common/Toggle',
+  component: "Toggle"
+};
+
+
+const Template = () =>
+  <div style={{display: "flex", flexWrap: "wrap"}}>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={false} checked={true} readOnly={true}/>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={false} checked={false} readOnly={true}/>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={true} checked={true} readOnly={true}/>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={true} checked={false} readOnly={true}/>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={false} checked={true} readOnly={true} id="toggle1"/>
+      <label htmlFor="toggle1">Label</label>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={false} checked={false} readOnly={true} id="toggle2"/>
+      <label htmlFor="toggle2">Label</label>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={true} checked={true} readOnly={true} id="toggle3"/>
+      <label htmlFor="toggle3">Label</label>
+    </div>
+    <div className="input toggle-switch" style={{width: "25%"}}>
+      <input type="checkbox" className="toggle-switch-checkbox checkbox" disabled={true} checked={false} readOnly={true} id="toggle4"/>
+      <label htmlFor="toggle4">Label</label>
+    </div>
+  </div>;
+
+export const Default = Template.bind({});

package/src/react-extension/components/Common/Tooltip/Tooltip.js

@@ -1,19 +1,18 @@
 /**
  * Passbolt ~ Open source password manager for teams
- * Copyright (c) 2020 Passbolt SA (https://www.passbolt.com)
+ * Copyright (c) 2022 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)
+ * @copyright     Copyright (c) 2022 Passbolt SA (https://www.passbolt.com)
  * @license       https://opensource.org/licenses/AGPL-3.0 AGPL License
  * @link          https://www.passbolt.com Passbolt(tm)
- * @since         2.13.0
+ * @since         3.6.0
  */
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import Icon from "../Icons/Icon";
 
 class Tooltip extends Component {
   /**
@@ -22,20 +21,25 @@ class Tooltip extends Component {
    */
   render() {
     return (
-      <span className="tooltip tooltip-right" data-tooltip={this.props.message}>
-        <Icon name={this.props.icon}/>
-      </span>
+      <div className="tooltip">
+        {this.props.children}
+        <span className={`tooltip-text ${this.props.direction}`}>
+          {this.props.message}
+        </span>
+      </div>
     );
   }
 }
 
+
 Tooltip.defaultProps = {
-  icon: 'warning'
+  direction: 'right'
 };
 
 Tooltip.propTypes = {
-  icon: PropTypes.string,
-  message: PropTypes.string
+  children: PropTypes.any,
+  message: PropTypes.any.isRequired,
+  direction: PropTypes.string
 };
 
 export default Tooltip;

package/src/react-extension/components/Common/Tooltip/Tooltip.test.stories.js

@@ -0,0 +1,56 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.6.0
+ */
+
+/**
+ * Storybook tests on Tootlip in regard of specifications
+ */
+import React from "react";
+import Icon from "../../../../shared/components/Icons/Icon";
+import Tooltip from "./Tooltip";
+
+export default {
+  title: 'Passbolt/Common/Tooltip',
+  component: Tooltip
+};
+
+
+
+const Template = () =>
+  <div style={{marginLeft: "auto", marginTop: "20rem", textAlign: "center"}}>
+    <p>Put the mouse below</p>
+    <Tooltip message="Tool tip placeholder" direction="top">
+      <Tooltip message="Tool tip placeholder" direction="right">
+        <Tooltip message="Tool tip placeholder" direction="bottom">
+          <Tooltip message="Tool tip placeholder" direction="left">
+            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+          </Tooltip>
+        </Tooltip>
+      </Tooltip>
+    </Tooltip>
+    <br/>
+    <br/>
+    <br/>
+    <br/>
+    <Tooltip message="Tool tip placeholder" direction="top">
+      <Tooltip message="Tool tip placeholder" direction="right">
+        <Tooltip message="Tool tip placeholder" direction="bottom">
+          <Tooltip message="Tool tip placeholder" direction="left">
+            <Icon name="info-circle"/>
+          </Tooltip>
+        </Tooltip>
+      </Tooltip>
+    </Tooltip>
+  </div>;
+
+export const Initial = Template.bind({});

package/src/react-extension/components/Common/Workflow/ManageWorkflows/ManageWorkflows.js

@@ -0,0 +1,72 @@
+/**
+ * Passbolt ~ Open source password manager for teams
+ * Copyright (c) 2022 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) 2022 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.6.0
+ */
+
+import React from "react";
+import {withWorkflow} from "../../../../contexts/WorkflowContext";
+import PropTypes from "prop-types";
+
+
+/**
+ * This component acts as an anchor for the different project workflows.
+ */
+class ManageWorkflows extends React.Component {
+  /**
+   * Default constructor
+   * @param props The component props
+   */
+  constructor(props) {
+    super(props);
+    this.bindCallback();
+  }
+
+  /**
+   * Bind class methods callback
+   */
+  bindCallback() {
+    this.stop = this.stop.bind(this);
+  }
+
+  /**
+   * Removes the index-th workflow
+   */
+  async stop(index) {
+    this.props.workflowContext.stop(index);
+  }
+
+  /**
+   * Renders the component
+   * @returns {JSX.Element}
+   */
+  render() {
+    return (
+      <>
+        {
+          this.props.workflowContext.workflows.map(({key, Workflow, workflowProps}) =>
+            <Workflow
+              key={key}
+              onStop={ () => this.stop(key)}
+              {...workflowProps} />)
+        }
+        {this.props.children}
+      </>
+    );
+  }
+}
+
+ManageWorkflows.propTypes = {
+  workflowContext: PropTypes.any,
+  children: PropTypes.any
+};
+
+export default withWorkflow(ManageWorkflows);

package/src/react-extension/components/InsertAppIframe.js

@@ -34,20 +34,27 @@ class InsertAppIframe extends Component {
    * @returns {void}
    */
   loadAppIframe() {
-    const contentScriptPathname = this.getPagePathname();
-    const iframeUrl = `${this.props.browserExtensionUrl}data/passbolt-iframe-app.html?passbolt=passbolt-iframe-app&pathname=${contentScriptPathname}`;
-    this.iframeRef.current.contentWindow.location = iframeUrl;
+    const url = new URL(`${this.props.browserExtensionUrl}data/passbolt-iframe-app.html`);
+    url.searchParams.append("passbolt", "passbolt-iframe-app");
+
+    // If the user aims to a location, extract it and add it as parameter of the iframe url.
+    const pathname = this.getPagePathname();
+    if (pathname && pathname !== "/") {
+      url.searchParams.append("pathname", pathname);
+    }
+
+    this.iframeRef.current.contentWindow.location = url.toString();
   }
 
   /**
    * Get the pathname from url.
    * By instance ?pathname=/app/users
    *
-   * @returns {string}
+   * @returns {string|null} Return null if the pathname doesn't validate
    */
   getPagePathname() {
     if (!this.validatePagePathname()) {
-      return "";
+      return null;
     }
 
     return this.props.location.pathname;
@@ -56,7 +63,6 @@ class InsertAppIframe extends Component {
   /**
    * Validate a pathname.
    * A valid pathname contains only alphabetical, numerical, / and - characters
-   * @param {string} pathname
    * @returns {boolean}
    */
   validatePagePathname() {