feat: ability to generate a random password #29

README.md

@@ -43,6 +43,7 @@ Or download it from [github releases](https://github.com/AXeL-dev/distract-me-no
 - [query-string](https://github.com/sindresorhus/query-string): URL query strings parsing library
 - [date-fns](https://date-fns.org): Date manipulation library
 - [lodash](https://lodash.com): Utility library
+- [omgopass](https://github.com/omgovich/omgopass): Password generator
 
 ### Scripts
 

package.json

@@ -13,6 +13,7 @@
     "fuzzaldrin-plus": "^0.6.0",
     "lodash": "^4.17.21",
     "node-sass": "^4.14.1",
+    "omgopass": "^3.2.1",
     "query-string": "^6.14.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",

src/components/Settings/index.jsx

@@ -394,6 +394,7 @@ export class Settings extends Component {
         checked={this.state.options.unblock.requirePassword}
         onChange={(event) => this.setOptions('unblock.requirePassword', event.target.checked)}
         disabled={!this.state.options.unblock.isEnabled || !this.state.options.password.isEnabled}
+        margin={0}
       />
     </Fragment>
   )
@@ -579,6 +580,7 @@ export class Settings extends Component {
         onChange={(event) => this.setOptions('password.value', event.target.value)}
         disabled={!this.state.options.password.isEnabled}
         //data-testid="password"
+        hasRandomButton
       />
     </Fragment>
   )

src/components/shared/PasswordField/index.jsx

@@ -22,6 +22,7 @@ export function PasswordField(props) {
           onChange={props.onChange}
           disabled={props.disabled}
           required={props.required}
+          hasRandomButton={props.hasRandomButton}
           //data-testid={props['data-testid']}
         />
       </Pane>

src/components/shared/PasswordInput/index.jsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
-import { Pane, TextInput, IconButton, Paragraph, EyeOpenIcon, EyeOffIcon } from 'evergreen-ui';
+import { Pane, TextInput, IconButton, Paragraph, Button, EyeOpenIcon, EyeOffIcon, RandomIcon } from 'evergreen-ui';
 import { RawHTML, OuterPane } from 'components';
+import generatePassword from 'omgopass';
 import './styles.scss';
 
 export class PasswordInput extends Component {
@@ -20,6 +21,15 @@ export class PasswordInput extends Component {
     }
   }
 
+  handleRandomButtonClick = () => {
+    const event = {
+      target: {
+        value: generatePassword(),
+      },
+    };
+    this.handleChange(event);
+  }
+
   toggle = (event) => {
     this.setState({ isShown: !this.state.isShown });
   }
@@ -28,6 +38,20 @@ export class PasswordInput extends Component {
     return (
       <OuterPane {...this.props}>
         <Pane display="flex">
+          {this.props.hasRandomButton &&
+            <Pane display="flex" alignItems="center" marginRight={-1}>
+              <Button
+                className="random-button"
+                appearance={this.props.randomButtonAppearance}
+                borderTopRightRadius={0}
+                borderBottomRightRadius={0}
+                onClick={this.handleRandomButtonClick}
+                disabled={this.props.disabled}
+              >
+                <RandomIcon size={14} />
+              </Button>
+            </Pane>
+          }
           <Pane display="flex" alignItems="center" flex={1} position="relative">
             <TextInput
               width="100%"
@@ -38,6 +62,8 @@ export class PasswordInput extends Component {
               disabled={this.props.disabled}
               required={this.props.required}
               //data-testid={this.props['data-testid']}
+              borderTopLeftRadius={this.props.hasRandomButton ? 0 : 3}
+              borderBottomLeftRadius={this.props.hasRandomButton ? 0 : 3}
               paddingRight={40}
             />
             <IconButton

src/components/shared/PasswordInput/styles.scss

@@ -9,3 +9,10 @@
     box-shadow: none !important;
   }
 }
+
+.random-button {
+  box-shadow: inset 0 0 0 1px rgba(67, 90, 111, 0.3), inset 0 1px 2px rgba(67, 90, 111, 0.14);
+  &[disabled] {
+    box-shadow: inset 0 0 0 1px rgba(67, 90, 111, 0.14);
+  }
+}