Fixes #20: Added PasswordWidget.

Author: n1k0

README.md

@@ -104,6 +104,7 @@ Here's a list of supported alternative widgets for different JSONSchema data typ
 #### `string`:
 
   * `textarea`: a `textarea` element;
+  * `password`: an `input[type=password]` element;
   * by default, a regular `input[type=text]` element is used.
 
 #### `number` and `integer`:

playground/samples/nested.js

@@ -10,9 +10,9 @@ module.exports = {
       },
       tasks: {
         type: "array",
+        title: "Tasks",
         items: {
           type: "object",
-          title: "Task",
           required: ["title"],
           properties: {
             title: {

playground/samples/simple.js

@@ -1,20 +1,47 @@
 module.exports = {
   schema: {
-    title: "A simple todo entry",
+    title: "A registration form",
     type: "object",
-    required: ["title"],
+    required: ["firstName", "lastName"],
     properties: {
-      title: {type: "string", title: "Title", default: "A new task"},
-      done: {type: "boolean", title: "Done?", default: false}
+      firstName: {
+        type: "string",
+        title: "First name",
+      },
+      lastName: {
+        type: "string",
+        title: "Last name",
+      },
+      age: {
+        type: "integer",
+        title: "Age"
+      },
+      bio: {
+        type: "string",
+        title: "Bio",
+      },
+      password: {
+        type: "string",
+        title: "Password"
+      }
     }
   },
   uiSchema: {
-    done: {
-      widget: "radio"
+    age: {
+      widget: "updown"
+    },
+    bio: {
+      widget: "textarea"
+    },
+    password: {
+      widget: "password"
     }
   },
   formData: {
-    title: "My task",
-    done: false
+    firstName: "Chuck",
+    lastName: "Norris",
+    age: 75,
+    bio: "Roundhouse kicking asses since 1940",
+    password: "noneed",
   }
 };

playground/styles.css

@@ -2,9 +2,14 @@
   width: 200px;
 }
 
-.rjsf input[type=text], .rjsf textarea {
+.rjsf input[type=text],
+.rjsf input[type=number],
+.rjsf input[type=password],
+.rjsf input[type=range],
+.rjsf textarea,
+.rjsf select {
   font-weight: normal;
-  width: 350px;
+  width: 320px;
 }
 
 .rjsf textarea {

src/components/fields/ArrayField.js

@@ -63,7 +63,7 @@ class ArrayField extends Component {
 
   render() {
     const {schema, uiSchema, name} = this.props;
-    const title = name || schema.title;
+    const title = schema.title || name;
     const {items} = this.state;
     return (
       <fieldset

src/components/widgets/PasswordWidget.js

@@ -0,0 +1,41 @@
+import React, { PropTypes } from "react";
+
+
+function PasswordWidget({
+  schema,
+  label,
+  placeholder,
+  value,
+  defaultValue,
+  required,
+  onChange
+}) {
+  return (
+    <input type="password"
+      value={value}
+      defaultValue={defaultValue}
+      placeholder={placeholder}
+      required={required}
+      onChange={(event) => onChange(event.target.value)} />
+  );
+}
+
+if (process.env.NODE_ENV !== "production") {
+  PasswordWidget.propTypes = {
+    schema: PropTypes.object.isRequired,
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    value: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    defaultValue: PropTypes.oneOfType([
+      React.PropTypes.string,
+      React.PropTypes.number,
+    ]),
+    required: PropTypes.bool,
+    onChange: PropTypes.func,
+  };
+}
+
+export default PasswordWidget;

src/utils.js

@@ -1,3 +1,4 @@
+import PasswordWidget from "./components/widgets/PasswordWidget";
 import RadioWidget from "./components/widgets/RadioWidget";
 import UpDownWidget from "./components/widgets/UpDownWidget";
 import RangeWidget from "./components/widgets/RangeWidget";
@@ -33,6 +34,7 @@ export function getAlternativeWidget(type, name) {
     break;
   case "string":
     switch(name) {
+    case "password": return PasswordWidget;
     case "radio": return RadioWidget;
     case "select": return SelectWidget;
     case "textarea": return TextareaWidget;

test/index_test.js

@@ -589,6 +589,42 @@ describe("Form", () => {
           expect(comp.state.formData).eql({foo: "b"});
         });
       });
+
+      describe("password", () => {
+        const uiSchema = {
+          foo: {
+            widget: "password"
+          }
+        };
+
+        it("should accept a uiSchema object", () => {
+          const {node} = createComponent({schema, uiSchema});
+
+          expect(node.querySelectorAll("[type=password]"))
+            .to.have.length.of(1);
+        });
+
+        it("should support formData", () => {
+          const {node} = createComponent({schema, uiSchema, formData: {
+            foo: "a"
+          }});
+
+          expect(node.querySelector("[type=password]").value)
+            .eql("a");
+        });
+
+        it("should update state when text is updated is checked", () => {
+          const {comp, node} = createComponent({schema, uiSchema, formData: {
+            foo: "a"
+          }});
+
+          Simulate.change(node.querySelector("[type=password]"), {
+            target: {value: "b"}
+          });
+
+          expect(comp.state.formData).eql({foo: "b"});
+        });
+      });
     });
 
     describe("string (enum)", () => {