Form required fields

src/components/SignupQuestionsWidget/OptionsWidget.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Question, InputProps, optionTypes, SignupQuestionError } from "./index";
+import Checkbox from "@components/Checkbox/Checkbox";
 
 export interface OptionsWidgetProps {
   inputProps: InputProps;
@@ -37,6 +38,23 @@ class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetSta
     onChange(questions);
   }
 
+  handleRequiredChange = (questions: Question[], index: number) => (event) => {
+    const { onChange } = this.props;
+    const val: boolean = event.target.checked;
+    console.log(val);
+    questions[index].required = val;
+    onChange(questions);
+  }
+
+  requiredField() {
+    const { inputProps } = this.props;
+    const { questions, index } = inputProps;
+    return <Checkbox
+      checked={questions[index].required}
+      onChange={this.handleRequiredChange(questions, index)}
+    >Required?</Checkbox>;
+  }
+
   render() {
     const { inputProps } = this.props;
     const { type, value, questions, index } = inputProps;
@@ -45,45 +63,62 @@ class OptionsWidget extends React.Component<OptionsWidgetProps, OptionsWidgetSta
     }
 
     if (type === "text" || type === "email" || type === "name") {
-      return null;
+      return this.requiredField();
     }
 
     if (type === "info") {
-      return <input
-        type="text"
-        placeholder="Write something informative"
-        value={questions[index].options}
-        onChange={this.handleTextOptionsChange(questions, index)} />;
+      return (
+        <>
+          <input
+            type="text"
+            placeholder="Write something informative"
+            value={questions[index].options}
+            onChange={this.handleTextOptionsChange(questions, index)} />
+          {this.requiredField()}
+        </>
+      );
     }
 
     if (type === "integer") {
       const lst = value as string[];
       const joinedValue = lst.join(",");
-      return <input
-        type="text"
-        placeholder="Minimum,Maximum"
-        value={joinedValue}
-        onChange={this.handleIntegerOptionsChange(questions, index)} />;
+      return (
+        <>
+          <input
+            type="text"
+            placeholder="Minimum,Maximum"
+            value={joinedValue}
+            onChange={this.handleIntegerOptionsChange(questions, index)} />
+          {this.requiredField()}
+        </>);
     }
 
     if (type === "radiobutton") {
       const lst = value as string[];
       const joinedValue = lst.join(",");
-      return <input
-        type="text"
-        placeholder="Yes,no,maybe"
-        value={joinedValue}
-        onChange={this.handleListOptionsChange(questions, index)} />;
+      return (
+        <>
+          <input
+            type="text"
+            placeholder="Yes,no,maybe"
+            value={joinedValue}
+            onChange={this.handleListOptionsChange(questions, index)} />
+          {this.requiredField()}
+        </>);
     }
 
     if (type === "checkbox") {
       const lst = value as string[];
       const joinedValue = lst.join(",");
-      return <input
-        type="text"
-        placeholder="A,B,C"
-        value={joinedValue}
-        onChange={this.handleListOptionsChange(questions, index)} />;
+      return (
+        <>
+          <input
+            type="text"
+            placeholder="A,B,C"
+            value={joinedValue}
+            onChange={this.handleListOptionsChange(questions, index)} />
+          {this.requiredField()}
+        </>);
     }
 
     throw new SignupQuestionError(`Unrecognized question widget type "${type}"`);

src/components/SignupQuestionsWidget/index.ts

@@ -5,6 +5,7 @@ export interface Question {
   name: string;
   type: OptionTypes;
   options: string[];
+  required?: boolean;
 }
 
 export interface InputProps {

src/views/SignUpPage/FormUtils.tsx

@@ -29,7 +29,6 @@ const questionToValidationSchema = (question: Question) => {
     obj = {
       type: "string",
       title: question.name,
-      default: "",
     };
   }
   else if(question.type === "info") {
@@ -42,11 +41,11 @@ const questionToValidationSchema = (question: Question) => {
   else if (question.type === "email") {
     // Format is just a "FYI" field, so we also have pattern.
     obj = {
-      type: "string",
+      type: question.required ? ["string"] : ["string", "null"],
       title: question.name,
       format: "email",
       pattern: EMAIL_REGEX.source,
-      default: ""
+      default: null
     }
   }
   else if (question.type === "radiobutton") {
@@ -67,7 +66,7 @@ const questionToValidationSchema = (question: Question) => {
         type: "string",
         enum: question.options,
         pattern: question.options.map(x => `^${x}$`).join("|"),
-      }
+      },
     }
   }
   // https://json-schema.org/understanding-json-schema/reference/numeric.html
@@ -109,8 +108,7 @@ const questionToValidationSchema = (question: Question) => {
 export const buildFormSchema = (signUpForm: SignupForm) => {
   let schemaProps = {};
   const {questions} = signUpForm;
-  const filtered = questions.filter(x => x.type !== "info");
-  const ids = filtered.map(q => q.id);
+  const requiredIds = questions.filter(q => q.required).map(q => q.id);
   const schemaPropsArray = questions.map(questionToValidationSchema);
   schemaPropsArray.forEach((schemaProp) => {
     schemaProps = {
@@ -122,7 +120,7 @@ export const buildFormSchema = (signUpForm: SignupForm) => {
   const schema = {
     title: signUpForm.id ? signUpForm.title : "Loading...",
     type: "object",
-    required: ids,
+    required: requiredIds,
     properties: schemaProps,
   };
 
@@ -131,9 +129,8 @@ export const buildFormSchema = (signUpForm: SignupForm) => {
 
 export const buildValidationSchema = (questions: Question[]) => {
   let schemaProps = {};
-  const filtered = questions.filter(x => x.type !== "info");
-  const ids = filtered.map(q => q.id);
-  const schemaPropsArray = filtered.map(questionToValidationSchema);
+  const requiredIds = questions.filter(q => q.required).map(q => q.id);
+  const schemaPropsArray = questions.map(questionToValidationSchema);
   schemaPropsArray.forEach((schemaProp) => {
     schemaProps = {
       ...schemaProps,
@@ -143,9 +140,9 @@ export const buildValidationSchema = (questions: Question[]) => {
 
   const validationSchema =  {
     type: "object",
-    required: ids,
-    minProperties: ids.length,
-    // maxProperties: ids.length,
+    required: requiredIds,
+    // minProperties: requiredIds.length,
+    // maxProperties: requiredIds.length,
     properties: schemaProps
   }
   return validationSchema;