changing secret inputs from password to text

with obfuscation using CSS.

Author: fdrab

modules/st2-auto-form/auto-form.component.js

@@ -23,7 +23,6 @@ import IntegerField from './fields/integer';
 import BooleanField from './fields/boolean';
 import StringField from './fields/string';
 import ObjectField from './fields/object';
-import PasswordField from './fields/password';
 import EnumField from './fields/enum';
 
 import './style.css';
@@ -57,10 +56,6 @@ export default class AutoForm extends React.Component {
       case 'boolean':
         return BooleanField;
       case 'string':
-        if (field.secret) {
-          return PasswordField;
-        }
-
         return StringField;
       case 'object':
         return ObjectField;

modules/st2-auto-form/fields/base.js

@@ -16,7 +16,7 @@ import _ from 'lodash';
 import React from 'react';
 import { PropTypes } from 'prop-types';
 
-import { TextFieldWrapper } from '../wrappers';
+import { TextFieldWrapper, Button } from '../wrappers';
 import TextareaAutosize from 'react-textarea-autosize';
 
 export class Textarea extends TextareaAutosize {
@@ -75,6 +75,10 @@ export class BaseTextField extends React.Component {
     throw new Error('not implemented');
   }
 
+  toggleVisibility() {
+    this.setState({ visible: !this.state.visible });
+  }
+
   validate(v, spec={}) {
     if ((v === '' || v === undefined) && spec.required) {
       return 'parameter is required';
@@ -111,20 +115,27 @@ export class BaseTextField extends React.Component {
 
   render() {
     const { icon } = this.constructor;
-    const { invalid } = this.state;
+    const { invalid, visible } = this.state;
     const { spec={} } = this.props;
     const wrapperProps = Object.assign({}, this.props);
 
     if (invalid) {
       wrapperProps.invalid = invalid;
     }
 
+    const buttonProps = {
+      icon: visible ? 'view2' : 'view',
+      title: visible ? 'hide value' : 'see value',
+      onClick: () => this.toggleVisibility(),
+    };
+
     const inputProps = {
-      className: 'st2-auto-form__field',
-      type: spec.secret ? 'password' : 'text',
+      className: spec.secret && !visible ? 'st2-auto-form__field--secret' : 'st2-auto-form__field',
+      type: 'text',
       placeholder:this.toStateValue(spec.default),
       disabled: this.props.disabled,
       value: this.state.value,
+      spellCheck: spec.secret && !visible ? false : true,
       onChange: (e) => this.handleChange(e, e.target.value),
       'data-test': this.props['data-test'],
     };
@@ -135,7 +146,10 @@ export class BaseTextField extends React.Component {
 
     return (
       <TextFieldWrapper icon={icon} {...wrapperProps}>
-        <input {...inputProps} />
+          <div >
+            { !this.props.disabled && spec.secret && <Button {...buttonProps} /> }
+            <input {...inputProps} />
+          </div>
       </TextFieldWrapper>
     );
   }
@@ -144,20 +158,31 @@ export class BaseTextField extends React.Component {
 export class BaseTextareaField extends BaseTextField {
   render() {
     const { icon } = this.constructor;
-    const { invalid } = this.state;
-    const { spec={} } = this.props;
+    const { invalid, visible } = this.state;
+    const { spec = {} } = this.props;
 
     const wrapperProps = Object.assign({}, this.props);
 
     if (invalid) {
       wrapperProps.invalid = invalid;
     }
 
+    const buttonProps = {
+      icon: visible ? 'view2' : 'view',
+      title: visible ? 'hide value' : 'see value',
+      onClick: () => this.toggleVisibility(),
+    };
+
+    const wrapperBlockProps = {
+      className: 'st2-auto-form__wrapper-block',
+    };
+
     const inputProps = {
-      className: 'st2-auto-form__field',
+      className: spec.secret && !visible ? 'st2-auto-form__field--secret' : 'st2-auto-form__field',
       placeholder:  this.toStateValue(spec.default),
       disabled: this.props.disabled,
       value: this.state.value,
+      spellCheck: spec.secret && !visible ? false : true,
       onChange: (e) => this.handleChange(e, e.target.value),
       minRows: 1,
       maxRows: 10,
@@ -170,7 +195,10 @@ export class BaseTextareaField extends BaseTextField {
 
     return (
       <TextFieldWrapper icon={icon} {...wrapperProps}>
-        <Textarea {...inputProps} />
+        <div {...wrapperBlockProps}>
+          { !this.props.disabled && spec.secret && <Button {...buttonProps} /> }
+          <Textarea {...inputProps} />
+        </div>
       </TextFieldWrapper>
     );
   }

modules/st2-auto-form/fields/integer.js

@@ -72,6 +72,6 @@ export default class IntegerField extends BaseTextField {
       } 
     }
 
-    return v && !validator.isInt(v) && `'${v}' is not an integer`;
+    return v && !validator.isInt(v) && `'${spec.secret ? "*".repeat(v.length) : v}' is not an integer`;
   }
 }

modules/st2-auto-form/fields/number.js

@@ -48,7 +48,7 @@ export default class NumberField extends BaseTextField {
     if (invalid !== void 0) {
       return invalid;
     }
-
-    return v && !validator.isFloat(v) && `'${v}' is not a number`;
+    
+    return v && !validator.isFloat(v) && `'${spec.secret ? "*".repeat(v.length) : v}' is not a number`;
   }
 }

modules/st2-auto-form/fields/password.js

@@ -17,6 +17,11 @@
     margin-bottom: 12px;
   }
 
+  &__wrapper-block {
+    display: flex;
+    align-items: center;
+  }
+
   &__title {
     font-size: 15px;
     line-height: 18px;
@@ -70,6 +75,21 @@
     &:hover {
       color: var(--aqua-base);
     }
+
+    &:before {
+      font-family: "brocadeicons";
+      font-size: 18px;
+      font-weight: normal;
+      font-style: normal;
+      line-height: 36px;
+
+      display: flex;
+
+      vertical-align: middle;
+      pointer-events: none;
+
+      color: var(--grey-base);
+    }
   }
 
   &__field {
@@ -88,6 +108,22 @@
     background-color: white;
     box-shadow: 0 1px 0 var(--grey-lighten-2);
 
+    &--secret {
+      font-weight: normal;
+      font-family: Roboto, sans-serif;
+      -webkit-box-sizing: border-box;
+        -moz-box-sizing: border-box;
+              box-sizing: border-box;
+      width: 100%;
+      padding: 0 12px;
+
+      color: black;
+      border: none;
+      outline: 0;
+      box-shadow: 0 1px 0 var(--grey-lighten-2);
+      -webkit-text-security: disc;
+    }
+
     &&[disabled] {
       cursor: default;
 
@@ -144,7 +180,8 @@
     color: black;
   }
 
-  &__text-field &__field {
+  &__text-field &__field,
+  &__text-field &__field--secret {
     font-size: 13px;
     line-height: 18px;
 
@@ -249,7 +286,6 @@
       padding: 0 10px 0 0;
 
       content: "\e91c";
-      vertical-align: middle;
       pointer-events: none;
 
       color: black;