Password widget

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/fields/BooleanField.js

@@ -8,7 +8,6 @@ function BooleanField({schema, name, uiSchema, formData, required, onChange}) {
   const {widget} = uiSchema;
   const commonProps = {
     schema,
-    type: schema.type,
     onChange,
     label: title || name,
     placeholder: description,

src/components/fields/StringField.js

@@ -6,11 +6,10 @@ import SelectWidget from "./../widgets/SelectWidget";
 
 
 function StringField({schema, name, uiSchema, formData, required, onChange}) {
-  const {type, title, description} = schema;
+  const {title, description} = schema;
   const {widget} = uiSchema;
   const commonProps = {
     schema,
-    type: type,
     label: title || name,
     placeholder: description,
     onChange,

src/components/widgets/CheckboxWidget.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from "react";
 
 function CheckboxWidget({
   schema,
-  type,
   onChange,
   label,
   defaultValue,
@@ -23,7 +22,6 @@ function CheckboxWidget({
 if (process.env.NODE_ENV !== "production") {
   CheckboxWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     onChange: PropTypes.func,
     label: PropTypes.string,
     defaultValue: PropTypes.bool,

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/components/widgets/RadioWidget.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from "react";
 
 function RadioWidget({
   schema,
-  type,
   options,
   label,
   placeholder,
@@ -38,7 +37,6 @@ function RadioWidget({
 if (process.env.NODE_ENV !== "production") {
   RadioWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     options: PropTypes.array.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,

src/components/widgets/RangeWidget.js

@@ -17,7 +17,6 @@ function rangeSpec(schema) {
 
 function RangeWidget({
   schema,
-  type,
   label,
   placeholder,
   value,
@@ -42,7 +41,6 @@ function RangeWidget({
 if (process.env.NODE_ENV !== "production") {
   RangeWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([

src/components/widgets/SelectWidget.js

@@ -18,7 +18,6 @@ function processValue(type, value) {
 
 function SelectWidget({
   schema,
-  type,
   options,
   label,
   placeholder,
@@ -32,7 +31,9 @@ function SelectWidget({
       title={placeholder}
       value={value}
       defaultValue={defaultValue}
-      onChange={(event) => onChange(processValue(type, event.target.value))}>{
+      onChange={(event) => {
+        onChange(processValue(schema.type, event.target.value));
+      }}>{
       options.map((option, i) => {
         return <option key={i} value={option}>{String(option)}</option>;
       })
@@ -43,7 +44,6 @@ function SelectWidget({
 if (process.env.NODE_ENV !== "production") {
   SelectWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     options: PropTypes.array.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,

src/components/widgets/TextWidget.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from "react";
 
 function TextWidget({
   schema,
-  type,
   label,
   placeholder,
   value,
@@ -24,7 +23,6 @@ function TextWidget({
 if (process.env.NODE_ENV !== "production") {
   TextWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([

src/components/widgets/TextareaWidget.js

@@ -3,7 +3,6 @@ import React, { PropTypes } from "react";
 
 function TextWidget({
   schema,
-  type,
   label,
   placeholder,
   value,
@@ -24,7 +23,6 @@ function TextWidget({
 if (process.env.NODE_ENV !== "production") {
   TextWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.string,

src/components/widgets/UpDownWidget.js

@@ -17,7 +17,6 @@ function rangeSpec(schema) {
 
 function UpDownWidget({
   schema,
-  type,
   label,
   placeholder,
   value,
@@ -39,7 +38,6 @@ function UpDownWidget({
 if (process.env.NODE_ENV !== "production") {
   UpDownWidget.propTypes = {
     schema: PropTypes.object.isRequired,
-    type: PropTypes.string.isRequired,
     label: PropTypes.string,
     placeholder: PropTypes.string,
     value: PropTypes.oneOfType([

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)", () => {