feat(ui): add "show/hide password" buttons

address #2731

renderer/components/Icon/EyeOff.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const SvgEyeOff = props => (
+  <svg
+    className="eye-off_svg__feather eye-off_svg__feather-eye-off"
+    fill="none"
+    height="1em"
+    stroke="currentColor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth={2}
+    viewBox="0 0 24 24"
+    width="1em"
+    {...props}
+  >
+    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+    <line x1={1} x2={23} y1={1} y2={23} />
+  </svg>
+)
+
+export default SvgEyeOff

renderer/components/Onboarding/Steps/Password.js

@@ -5,9 +5,15 @@ import { FormattedMessage, injectIntl } from 'react-intl'
 import { intlShape } from '@zap/i18n'
 import { Bar, Header } from 'components/UI'
 import { Form, Input } from 'components/Form'
+import SvgEye from 'components/Icon/Eye'
+import SvgEyeOff from 'components/Icon/EyeOff'
 import messages from './messages'
 
 class Password extends React.Component {
+  state = {
+    isPasswordVisible: false,
+  }
+
   static propTypes = {
     intl: intlShape.isRequired,
     setPassword: PropTypes.func.isRequired,
@@ -25,6 +31,12 @@ class Password extends React.Component {
     await setPassword(values.password)
   }
 
+  toggleIsPasswordVisible = () => {
+    this.setState(prevState => ({
+      isPasswordVisible: !prevState.isPasswordVisible,
+    }))
+  }
+
   setFormApi = formApi => {
     this.formApi = formApi
   }
@@ -33,6 +45,7 @@ class Password extends React.Component {
     const { wizardApi, wizardState, setPassword, intl, ...rest } = this.props
     const { getApi, onChange, onSubmit, onSubmitFailure } = wizardApi
     const { currentItem } = wizardState
+    const { isPasswordVisible } = this.state
 
     return (
       <Form
@@ -72,11 +85,29 @@ class Password extends React.Component {
                   minLength={8}
                   name="password"
                   placeholder={intl.formatMessage({ ...messages.password_placeholder })}
-                  type="password"
+                  type={isPasswordVisible ? 'text' : 'password'}
                   validateOnBlur={shouldValidateInline}
                   validateOnChange={shouldValidateInline}
                   willAutoFocus
-                />
+                >
+                  {(() => {
+                    const css = `
+                      cursor: pointer;
+                      height: 32px;
+                      padding: 0 8px;
+                      position: absolute;
+                      right: 8px;
+                      user-select: none;
+                      width: 32px;
+                    `
+
+                    return isPasswordVisible ? (
+                      <SvgEyeOff css={css} onClick={this.toggleIsPasswordVisible} />
+                    ) : (
+                      <SvgEye css={css} onClick={this.toggleIsPasswordVisible} />
+                    )
+                  })()}
+                </Input>
               </Box>
             </>
           )