Add checkbox signup form widget

src/components/SignupQuestionsWidget/OptionsWidget.tsx

@@ -17,11 +17,19 @@ class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetSta
     onChange(questions);
   }
 
+  handleCheckboxOptionsChange = (questions: Question[], index: number) => (event) => {
+    const { onChange } = this.props;
+    const val = event.target.value;
+    const lst = val.split(",").map(p => p.trimLeft());
+    questions[index].options = lst;
+    onChange(questions);
+  }
+
   render() {
     const { inputProps } = this.props;
     const { type, value, questions, index } = inputProps;
     if (!optionTypes.includes(type)) {
-      throw new SignupQuestionError(`Qquestion widget type "${type}" not in types array.`);
+      throw new SignupQuestionError(`Question widget type "${type}" not in types array.`);
     }
 
     if (type === "text") {
@@ -38,6 +46,15 @@ class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetSta
         onChange={this.handleRadiobuttonOptionsChange(questions, index)} />;
     }
 
+    if (type === "checkbox") {
+      const lst = value as string[];
+      const joinedValue = lst.join(",");
+      return <input
+        type="text"
+        placeholder="A,B,C"
+        value={joinedValue}
+        onChange={this.handleCheckboxOptionsChange(questions, index)} />;
+    }
 
     throw new SignupQuestionError(`Unrecognized question widget type "${type}"`);
   }

src/components/SignupQuestionsWidget/index.ts

@@ -17,6 +17,7 @@ export interface InputProps {
 export const optionTypes = [
   "text",
   "radiobutton",
+  "checkbox",
 ];
 
 export class SignupQuestionError extends Error { }

src/pages/AdminSignupPage/AdminSignupPage.scss

@@ -18,3 +18,10 @@
     }
   }
 }
+
+.signup-create-page {
+  a {
+      color: color(orange1);
+      text-decoration: underline;
+  }
+}

src/pages/SignUpPage/SignUpPage.tsx

@@ -77,6 +77,17 @@ class SignUpPage extends React.Component<SignUpPageProps, SignUpPageState> {
         </span>
       ));
     }
+    if (question.type === "checkbox") {
+      const { options } = question;
+      return options.map((opt, index) => {
+        const optSlug = opt.replace(/\s/g, "_").toLocaleLowerCase();
+        return (
+          <span key={index}>
+            <input type="checkbox" name={`${question.id}-${optSlug}`} value={opt} /> {opt}<br />
+          </span>
+        )
+      });
+    }
   }
 
   renderQuestion = (question: Question) => {

src/pages/SignupCreatePage/SignupCreatePage.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import Helmet from "react-helmet";
+import { Link } from "react-router-dom";
 import "./SignupCreatePage.scss";
 import Form from "react-jsonschema-form";
 import { createForm, getForm, updateForm } from "../../models/SignupForm";
@@ -176,6 +177,9 @@ class SignupCreatePage extends React.Component<SignupCreatePageProps, SignupCrea
         </Helmet>
         <h1>{title}</h1>
         {statusMessage && <div className="success">{statusMessage}</div>}
+        {formData.id && <p>
+          Check out the signup form here: <Link to={`/signup/${formData.id}`}>{formData.title}</Link>
+        </p>}
         <Form schema={schema}
           uiSchema={uiSchema}
           formData={formData}