Created InputPassword

packages/strapi-helper-plugin/lib/src/components/InputPassword/index.js

@@ -0,0 +1,104 @@
+/**
+ *
+ * InputPassword
+ *
+ */
+
+import React, { Fragment } from 'react';
+import { FormattedMessage } from 'react-intl';
+import PropTypes from 'prop-types';
+import { isEmpty } from 'lodash';
+import cn from 'classnames';
+
+import styles from './styles.scss';
+
+class InputPassword extends React.Component {
+  state = { showPassword: false };
+
+  handleClick = () => this.setState({ showPassword: !this.state.showPassword });
+
+  render() {
+    const {
+      autoFocus,
+      className,
+      deactivateErrorHighlight,
+      disabled,
+      error,
+      name,
+      onBlur,
+      onChange,
+      onFocus,
+      placeholder,
+      style,
+      tabIndex,
+      value,
+    } = this.props;
+
+    const eyeColor = this.state.showPassword ? { color: 'black' }  : { color: '#9EA7B8' };
+
+    return (
+      <Fragment>
+        <FormattedMessage id={placeholder} defaultMessage={placeholder}>
+          {(message) => (
+            <input
+              autoFocus={autoFocus}
+              className={cn(
+                styles.inputPassword,
+                'form-control',
+                !deactivateErrorHighlight && error && 'is-invalid',
+                !isEmpty(className)&& className,
+              )}
+              disabled={disabled}
+              id={name}
+              name={name}
+              onBlur={onBlur}
+              onChange={onChange}
+              onFocus={onFocus}
+              placeholder={message}
+              style={style}
+              tabIndex={tabIndex}
+              type={!this.state.showPassword && 'password' || 'text'}
+              value={value}
+            />
+          )}
+        </FormattedMessage>
+        <div className={styles.iconEyeWrapper}>
+          <div className={styles.iconEyeSubWrapper} onClick={this.handleClick} style={eyeColor}>
+            <i className="fa fa-eye" />
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+InputPassword.defaultProps = {
+  autoFocus: false,
+  className: '',
+  deactivateErrorHighlight: false,
+  disabled: false,
+  error: false,
+  onBlur: () => {},
+  onFocus: () => {},
+  placeholder: 'app.utils.placeholder.defaultMessage',
+  style: {},
+  tabIndex: '0',
+};
+
+InputPassword.propTypes = {
+  autoFocus: PropTypes.bool,
+  className: PropTypes.string,
+  deactivateErrorHighlight: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  name: PropTypes.string.isRequired,
+  onBlur: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  placeholder: PropTypes.string,
+  style: PropTypes.object,
+  tabIndex: PropTypes.string,
+  value: PropTypes.string.isRequired,
+};
+
+export default InputPassword;

packages/strapi-helper-plugin/lib/src/components/InputPassword/styles.scss

@@ -0,0 +1,26 @@
+.inputPassword {
+  height: 3.4rem;
+  margin-top: .9rem;
+  padding-left: 1rem;
+  background-size: 0 !important;
+  border: 1px solid #E3E9F3;
+  border-radius: 0.25rem;
+  line-height: 3.4rem;
+  font-size: 1.3rem;
+  font-family: 'Lato' !important;
+  box-shadow: 0px 1px 1px rgba(104, 118, 142, 0.05);
+}
+
+.iconEyeSubWrapper {
+  position: absolute;
+  top: -2.8rem;
+  right: 2.7rem;
+  color: #9EA7B8;
+  &:hover {
+    color: black!important;
+  }
+}
+
+.iconEyeWrapper {
+  position: relative;
+}