From c30840b5f973f1932d266aa0e515e33d53c83756 Mon Sep 17 00:00:00 2001
From: BenjaVR <benjamin.v.renterghem@gmail.com>
Date: Sun, 24 Feb 2019 17:22:14 +0100
Subject: [PATCH] Submit form modals on enter press

---
 .../departments/DepartmentsFormModal.tsx      |  91 ++++----
 .../educations/EducationsFormModal.tsx        |  59 +++--
 .../planning/PlanningsFormModal.tsx           | 217 +++++++++---------
 src/components/schools/SchoolsFormModal.tsx   |  59 +++--
 src/components/students/StudentsFormModal.tsx | 157 +++++++------
 5 files changed, 314 insertions(+), 269 deletions(-)

diff --git a/src/components/departments/DepartmentsFormModal.tsx b/src/components/departments/DepartmentsFormModal.tsx
index 1dd494e..ed0f28c 100644
--- a/src/components/departments/DepartmentsFormModal.tsx
+++ b/src/components/departments/DepartmentsFormModal.tsx
@@ -48,6 +48,7 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
         };
 
         this.renderEducationSelectOption = this.renderEducationSelectOption.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleColorChange = this.handleColorChange.bind(this);
         this.handleAfterClose = this.handleAfterClose.bind(this);
         this.handleClose = this.handleClose.bind(this);
@@ -148,49 +149,51 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
         });
 
         return (
-            <Modal
-                visible={this.props.isVisible}
-                title={this.props.title}
-                onCancel={this.handleClose}
-                onOk={this.handleOk}
-                okText={this.props.okText}
-                confirmLoading={this.state.isSubmitting}
-                destroyOnClose={true}
-                afterClose={this.handleAfterClose}
-            >
-                <Form>
-                    <FormItem label="Naam">
-                        {getFieldDecorator<Department>("name", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                { required: true, message: "Naam mag niet leeg zijn" },
-                            ],
-                        })(
-                            <Input
-                                autoFocus={true}
-                                disabled={this.state.isSubmitting}
-                            />,
-                        )}
-                    </FormItem>
-                    <FormItem label="Kleur">
-                        {getFieldDecorator<Department>("color", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                { required: true, message: "Kies een kleur" },
-                            ],
-                        })(
-                            <CirclePicker color={this.state.selectedColor} onChange={this.handleColorChange} />,
-                        )}
-                    </FormItem>
+            <div onKeyDown={this.handleKeyDown}>
+                <Modal
+                    visible={this.props.isVisible}
+                    title={this.props.title}
+                    onCancel={this.handleClose}
+                    onOk={this.handleOk}
+                    okText={this.props.okText}
+                    confirmLoading={this.state.isSubmitting}
+                    destroyOnClose={true}
+                    afterClose={this.handleAfterClose}
+                >
+                    <Form>
+                        <FormItem label="Naam">
+                            {getFieldDecorator<Department>("name", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    { required: true, message: "Naam mag niet leeg zijn" },
+                                ],
+                            })(
+                                <Input
+                                    autoFocus={true}
+                                    disabled={this.state.isSubmitting}
+                                />,
+                            )}
+                        </FormItem>
+                        <FormItem label="Kleur">
+                            {getFieldDecorator<Department>("color", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    { required: true, message: "Kies een kleur" },
+                                ],
+                            })(
+                                <CirclePicker color={this.state.selectedColor} onChange={this.handleColorChange} />,
+                            )}
+                        </FormItem>
 
-                    <h4>Capaciteit per opleiding</h4>
-                    <p>Max. aantal studenten per opleiding voor deze afdeling</p>
-                    {capacitiesFormItems}
-                    <Button type="dashed" onClick={this.handleAddCapacityField} className={styles.fullWidthInputField}>
-                        Voeg capaciteit toe
+                        <h4>Capaciteit per opleiding</h4>
+                        <p>Max. aantal studenten per opleiding voor deze afdeling</p>
+                        {capacitiesFormItems}
+                        <Button type="dashed" onClick={this.handleAddCapacityField} className={styles.fullWidthInputField}>
+                            Voeg capaciteit toe
                     </Button>
-                </Form>
-            </Modal>
+                    </Form>
+                </Modal>
+            </div>
         );
     }
 
@@ -200,6 +203,12 @@ class DepartmentFormModal extends React.Component<DepartmentFormModalProps, IDep
         );
     }
 
+    private handleKeyDown(event: React.KeyboardEvent): void {
+        if (event.key === "Enter") {
+            this.handleOk();
+        }
+    }
+
     private handleColorChange(color: ColorResult): void {
         this.setState({ selectedColor: color.hex });
     }
diff --git a/src/components/educations/EducationsFormModal.tsx b/src/components/educations/EducationsFormModal.tsx
index caf38b8..deff5b5 100644
--- a/src/components/educations/EducationsFormModal.tsx
+++ b/src/components/educations/EducationsFormModal.tsx
@@ -32,6 +32,7 @@ class EducationFormModal extends React.Component<EducationFormModalProps, IEduca
             formValidateTrigger: "",
         };
 
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleOk = this.handleOk.bind(this);
     }
@@ -53,34 +54,42 @@ class EducationFormModal extends React.Component<EducationFormModalProps, IEduca
         const { getFieldDecorator } = this.props.form;
 
         return (
-            <Modal
-                visible={this.props.isVisible}
-                title={this.props.title}
-                onCancel={this.handleClose}
-                onOk={this.handleOk}
-                okText={this.props.okText}
-                confirmLoading={this.state.isSubmitting}
-                destroyOnClose={true}
-            >
-                <Form>
-                    <FormItem label="Naam">
-                        {getFieldDecorator<Education>("name", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                { required: true, message: "Naam mag niet leeg zijn" },
-                            ],
-                        })(
-                            <Input
-                                autoFocus={true}
-                                disabled={this.state.isSubmitting}
-                            />,
-                        )}
-                    </FormItem>
-                </Form>
-            </Modal>
+            <div onKeyDown={this.handleKeyDown}>
+                <Modal
+                    visible={this.props.isVisible}
+                    title={this.props.title}
+                    onCancel={this.handleClose}
+                    onOk={this.handleOk}
+                    okText={this.props.okText}
+                    confirmLoading={this.state.isSubmitting}
+                    destroyOnClose={true}
+                >
+                    <Form>
+                        <FormItem label="Naam">
+                            {getFieldDecorator<Education>("name", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    { required: true, message: "Naam mag niet leeg zijn" },
+                                ],
+                            })(
+                                <Input
+                                    autoFocus={true}
+                                    disabled={this.state.isSubmitting}
+                                />,
+                            )}
+                        </FormItem>
+                    </Form>
+                </Modal>
+            </div>
         );
     }
 
+    private handleKeyDown(event: React.KeyboardEvent): void {
+        if (event.key === "Enter") {
+            this.handleOk();
+        }
+    }
+
     private handleClose(): void {
         this.props.onCloseRequest();
     }
diff --git a/src/components/planning/PlanningsFormModal.tsx b/src/components/planning/PlanningsFormModal.tsx
index d426799..71ebf43 100644
--- a/src/components/planning/PlanningsFormModal.tsx
+++ b/src/components/planning/PlanningsFormModal.tsx
@@ -43,6 +43,7 @@ class PlanningsFormModal extends React.Component<PlanningsFormModalProps, IPlann
         };
 
         this.renderDepartmentSelectOption = this.renderDepartmentSelectOption.bind(this);
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleStartDateChange = this.handleStartDateChange.bind(this);
         this.handleEndDateChange = this.handleEndDateChange.bind(this);
         this.handleClose = this.handleClose.bind(this);
@@ -79,113 +80,115 @@ class PlanningsFormModal extends React.Component<PlanningsFormModalProps, IPlann
         const { getFieldDecorator } = this.props.form;
 
         return (
-            <Modal
-                visible={this.props.isVisible}
-                title={this.props.title}
-                onCancel={this.handleClose}
-                onOk={this.handleOk}
-                okText={this.props.okText}
-                confirmLoading={this.state.isSubmitting}
-                destroyOnClose={true}
-                afterClose={this.handleFormClosed}
-            >
-                <Form>
-                    <Row type="flex" align="middle" gutter={4}>
-                        <Col span={10}>
-                            <FormItem label="Start datum">
-                                {getFieldDecorator<IStudentInternship>("startDate", {
-                                    validateTrigger: this.state.formValidateTrigger,
-                                    rules: [
-                                        { required: true, message: "Start datum mag niet leeg zijn" },
-                                    ],
-                                })(
-                                    <DatePicker
-                                        format="DD/MM/YYYY"
-                                        allowClear={true}
-                                        disabled={this.state.isSubmitting}
-                                        onChange={this.handleStartDateChange}
-                                    />,
-                                )}
-                            </FormItem>
-                        </Col>
-                        <Col span={10}>
-                            <FormItem label="Eind datum">
-                                {getFieldDecorator<IStudentInternship>("endDate", {
-                                    validateTrigger: this.state.formValidateTrigger,
-                                    validateFirst: true,
-                                    rules: [
-                                        { required: true, message: "Eind datum mag niet leeg zijn" },
-                                        {
-                                            validator: (_, endDate: moment.Moment | undefined, callback) => {
-                                                const startDate = this.props.form.getFieldValue(nameof<IStudentInternship>("startDate"));
-                                                if (isMomentDayAfterOrTheSameAsOtherDay(endDate, startDate)) {
-                                                    return callback();
-                                                }
-                                                return callback(false);
+            <div onKeyDown={this.handleKeyDown}>
+                <Modal
+                    visible={this.props.isVisible}
+                    title={this.props.title}
+                    onCancel={this.handleClose}
+                    onOk={this.handleOk}
+                    okText={this.props.okText}
+                    confirmLoading={this.state.isSubmitting}
+                    destroyOnClose={true}
+                    afterClose={this.handleFormClosed}
+                >
+                    <Form onKeyDown={this.handleKeyDown}>
+                        <Row type="flex" align="middle" gutter={4}>
+                            <Col span={10}>
+                                <FormItem label="Start datum">
+                                    {getFieldDecorator<IStudentInternship>("startDate", {
+                                        validateTrigger: this.state.formValidateTrigger,
+                                        rules: [
+                                            { required: true, message: "Start datum mag niet leeg zijn" },
+                                        ],
+                                    })(
+                                        <DatePicker
+                                            format="DD/MM/YYYY"
+                                            allowClear={true}
+                                            disabled={this.state.isSubmitting}
+                                            onChange={this.handleStartDateChange}
+                                        />,
+                                    )}
+                                </FormItem>
+                            </Col>
+                            <Col span={10}>
+                                <FormItem label="Eind datum">
+                                    {getFieldDecorator<IStudentInternship>("endDate", {
+                                        validateTrigger: this.state.formValidateTrigger,
+                                        validateFirst: true,
+                                        rules: [
+                                            { required: true, message: "Eind datum mag niet leeg zijn" },
+                                            {
+                                                validator: (_, endDate: moment.Moment | undefined, callback) => {
+                                                    const startDate = this.props.form.getFieldValue(nameof<IStudentInternship>("startDate"));
+                                                    if (isMomentDayAfterOrTheSameAsOtherDay(endDate, startDate)) {
+                                                        return callback();
+                                                    }
+                                                    return callback(false);
+                                                },
+                                                message: "Eind datum mag niet voor de start datum liggen",
                                             },
-                                            message: "Eind datum mag niet voor de start datum liggen",
+                                        ],
+                                    })(
+                                        <DatePicker
+                                            format="DD/MM/YYYY"
+                                            allowClear={true}
+                                            disabled={this.state.isSubmitting}
+                                            onChange={this.handleEndDateChange}
+                                        />,
+                                    )}
+                                </FormItem>
+                            </Col>
+                            <Col span={4}>
+                                <p className={styles.amountOfDaysText}>{this.state.selectedStartDate !== null && this.state.selectedEndDate !== null &&
+                                    `${this.state.selectedEndDate.diff(this.state.selectedStartDate, "days") + 1} dag(en)` // +1 to include both start and end date.
+                                }</p>
+                            </Col>
+                        </Row>
+                        <FormItem label="Stage uren">
+                            {getFieldDecorator<IStudentInternship>("hours", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    { required: true, message: "Geef een aantal stage uren in" },
+                                ],
+                            })(
+                                <InputNumber
+                                    style={{ width: "100%" }}
+                                    disabled={this.state.isSubmitting}
+                                    min={0}
+                                />,
+                            )}
+                        </FormItem>
+                        <FormItem label="Afdeling">
+                            {getFieldDecorator<IStudentInternship>("departmentId", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    {
+                                        required: true,
+                                        validator: (_, departmentId, callback) => {
+                                            if (departmentId === undefined || departmentId === "") {
+                                                callback(false);
+                                            }
+                                            callback();
                                         },
-                                    ],
-                                })(
-                                    <DatePicker
-                                        format="DD/MM/YYYY"
-                                        allowClear={true}
-                                        disabled={this.state.isSubmitting}
-                                        onChange={this.handleEndDateChange}
-                                    />,
-                                )}
-                            </FormItem>
-                        </Col>
-                        <Col span={4}>
-                            <p className={styles.amountOfDaysText}>{this.state.selectedStartDate !== null && this.state.selectedEndDate !== null &&
-                                `${this.state.selectedEndDate.diff(this.state.selectedStartDate, "days") + 1} dag(en)` // +1 to include both start and end date.
-                            }</p>
-                        </Col>
-                    </Row>
-                    <FormItem label="Stage uren">
-                        {getFieldDecorator<IStudentInternship>("hours", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                { required: true, message: "Geef een aantal stage uren in" },
-                            ],
-                        })(
-                            <InputNumber
-                                style={{ width: "100%" }}
-                                disabled={this.state.isSubmitting}
-                                min={0}
-                            />,
-                        )}
-                    </FormItem>
-                    <FormItem label="Afdeling">
-                        {getFieldDecorator<IStudentInternship>("departmentId", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                {
-                                    required: true,
-                                    validator: (_, departmentId, callback) => {
-                                        if (departmentId === undefined || departmentId === "") {
-                                            callback(false);
-                                        }
-                                        callback();
+                                        message: "Kies een afdeling",
                                     },
-                                    message: "Kies een afdeling",
-                                },
-                            ],
-                        })(
-                            <Select
-                                disabled={this.state.isSubmitting}
-                                loading={this.props.areDepartmentsLoading}
-                                allowClear={true}
-                                showSearch={true}
-                                filterOption={true}
-                                optionFilterProp="children"
-                            >
-                                {this.props.departments.map(this.renderDepartmentSelectOption)}
-                            </Select>,
-                        )}
-                    </FormItem>
-                </Form>
-            </Modal>
+                                ],
+                            })(
+                                <Select
+                                    disabled={this.state.isSubmitting}
+                                    loading={this.props.areDepartmentsLoading}
+                                    allowClear={true}
+                                    showSearch={true}
+                                    filterOption={true}
+                                    optionFilterProp="children"
+                                >
+                                    {this.props.departments.map(this.renderDepartmentSelectOption)}
+                                </Select>,
+                            )}
+                        </FormItem>
+                    </Form>
+                </Modal>
+            </div>
         );
     }
 
@@ -195,6 +198,12 @@ class PlanningsFormModal extends React.Component<PlanningsFormModalProps, IPlann
         );
     }
 
+    private handleKeyDown(event: React.KeyboardEvent): void {
+        if (event.key === "Enter") {
+            this.handleOk();
+        }
+    }
+
     private handleStartDateChange(date: moment.Moment, _: string): void {
         this.setState({ selectedStartDate: date });
     }
diff --git a/src/components/schools/SchoolsFormModal.tsx b/src/components/schools/SchoolsFormModal.tsx
index ba88417..51f498c 100644
--- a/src/components/schools/SchoolsFormModal.tsx
+++ b/src/components/schools/SchoolsFormModal.tsx
@@ -32,6 +32,7 @@ class SchoolsFormModal extends React.Component<SchoolFormModalProps, ISchoolsFor
             formValidateTrigger: "",
         };
 
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleOk = this.handleOk.bind(this);
     }
@@ -53,34 +54,42 @@ class SchoolsFormModal extends React.Component<SchoolFormModalProps, ISchoolsFor
         const { getFieldDecorator } = this.props.form;
 
         return (
-            <Modal
-                visible={this.props.isVisible}
-                title={this.props.title}
-                onCancel={this.handleClose}
-                onOk={this.handleOk}
-                okText={this.props.okText}
-                confirmLoading={this.state.isSubmitting}
-                destroyOnClose={true}
-            >
-                <Form>
-                    <FormItem label="Naam">
-                        {getFieldDecorator<School>("name", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                { required: true, message: "Naam mag niet leeg zijn" },
-                            ],
-                        })(
-                            <Input
-                                autoFocus={true}
-                                disabled={this.state.isSubmitting}
-                            />,
-                        )}
-                    </FormItem>
-                </Form>
-            </Modal>
+            <div onKeyDown={this.handleKeyDown}>
+                <Modal
+                    visible={this.props.isVisible}
+                    title={this.props.title}
+                    onCancel={this.handleClose}
+                    onOk={this.handleOk}
+                    okText={this.props.okText}
+                    confirmLoading={this.state.isSubmitting}
+                    destroyOnClose={true}
+                >
+                    <Form>
+                        <FormItem label="Naam">
+                            {getFieldDecorator<School>("name", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    { required: true, message: "Naam mag niet leeg zijn" },
+                                ],
+                            })(
+                                <Input
+                                    autoFocus={true}
+                                    disabled={this.state.isSubmitting}
+                                />,
+                            )}
+                        </FormItem>
+                    </Form>
+                </Modal>
+            </div>
         );
     }
 
+    private handleKeyDown(event: React.KeyboardEvent): void {
+        if (event.key === "Enter") {
+            this.handleOk();
+        }
+    }
+
     private handleClose(): void {
         this.props.onCloseRequest();
     }
diff --git a/src/components/students/StudentsFormModal.tsx b/src/components/students/StudentsFormModal.tsx
index 2836944..b4e6935 100644
--- a/src/components/students/StudentsFormModal.tsx
+++ b/src/components/students/StudentsFormModal.tsx
@@ -38,6 +38,7 @@ class StudentsFormModal extends React.Component<StudentFormModalProps, IStudents
             formValidateTrigger: "",
         };
 
+        this.handleKeyDown = this.handleKeyDown.bind(this);
         this.handleClose = this.handleClose.bind(this);
         this.handleOk = this.handleOk.bind(this);
     }
@@ -80,80 +81,82 @@ class StudentsFormModal extends React.Component<StudentFormModalProps, IStudents
         const { getFieldDecorator } = this.props.form;
 
         return (
-            <Modal
-                visible={this.props.isVisible}
-                title={this.props.title}
-                onCancel={this.handleClose}
-                onOk={this.handleOk}
-                okText={this.props.okText}
-                confirmLoading={this.state.isSubmitting}
-                destroyOnClose={true}
-            >
-                <Form layout="horizontal">
-                    <FormItem label="Voornaam">
-                        {getFieldDecorator<Student>("firstName", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            rules: [
-                                { required: true, message: "Voornaam mag niet leeg zijn" },
-                            ],
-                        })(
-                            <Input
-                                autoFocus={true}
-                                disabled={this.state.isSubmitting}
-                            />,
-                        )}
-                    </FormItem>
-                    <FormItem label="Familienaam">
-                        {getFieldDecorator<Student>("lastName", {
-                            validateTrigger: this.state.formValidateTrigger,
-                        })(
-                            <Input
-                                disabled={this.state.isSubmitting}
-                            />,
-                        )}
-                    </FormItem>
-                    <FormItem label="School">
-                        {getFieldDecorator<Student>("schoolId", {
-                            validateTrigger: this.state.formValidateTrigger,
-                        })(
-                            <Select
-                                disabled={this.state.isSubmitting}
-                                loading={this.props.isLoadingSchools}
-                                allowClear={true}
-                                showSearch={true}
-                                filterOption={true}
-                                optionFilterProp="children"
-                            >
-                                {this.props.schools.map(this.renderSchoolSelectOption)}
-                            </Select>,
-                        )}
-                    </FormItem>
-                    <FormItem label="Opleiding">
-                        {getFieldDecorator<Student>("educationId", {
-                            validateTrigger: this.state.formValidateTrigger,
-                        })(
-                            <Select
-                                disabled={this.state.isSubmitting}
-                                loading={this.props.isLoadingEducations}
-                                allowClear={true}
-                                showSearch={true}
-                                filterOption={true}
-                                optionFilterProp="children"
-                            >
-                                {this.props.educations.map(this.renderEducationSelectOption)}
-                            </Select>,
-                        )}
-                    </FormItem>
-                    <FormItem label="Bevestiging">
-                        {getFieldDecorator<Student>("isConfirmed", {
-                            validateTrigger: this.state.formValidateTrigger,
-                            valuePropName: "checked",
-                        })(
-                            <Checkbox disabled={this.state.isSubmitting}>Student is bevestigd door de school</Checkbox>,
-                        )}
-                    </FormItem>
-                </Form>
-            </Modal>
+            <div onKeyDown={this.handleKeyDown}>
+                <Modal
+                    visible={this.props.isVisible}
+                    title={this.props.title}
+                    onCancel={this.handleClose}
+                    onOk={this.handleOk}
+                    okText={this.props.okText}
+                    confirmLoading={this.state.isSubmitting}
+                    destroyOnClose={true}
+                >
+                    <Form layout="horizontal">
+                        <FormItem label="Voornaam">
+                            {getFieldDecorator<Student>("firstName", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                rules: [
+                                    { required: true, message: "Voornaam mag niet leeg zijn" },
+                                ],
+                            })(
+                                <Input
+                                    autoFocus={true}
+                                    disabled={this.state.isSubmitting}
+                                />,
+                            )}
+                        </FormItem>
+                        <FormItem label="Familienaam">
+                            {getFieldDecorator<Student>("lastName", {
+                                validateTrigger: this.state.formValidateTrigger,
+                            })(
+                                <Input
+                                    disabled={this.state.isSubmitting}
+                                />,
+                            )}
+                        </FormItem>
+                        <FormItem label="School">
+                            {getFieldDecorator<Student>("schoolId", {
+                                validateTrigger: this.state.formValidateTrigger,
+                            })(
+                                <Select
+                                    disabled={this.state.isSubmitting}
+                                    loading={this.props.isLoadingSchools}
+                                    allowClear={true}
+                                    showSearch={true}
+                                    filterOption={true}
+                                    optionFilterProp="children"
+                                >
+                                    {this.props.schools.map(this.renderSchoolSelectOption)}
+                                </Select>,
+                            )}
+                        </FormItem>
+                        <FormItem label="Opleiding">
+                            {getFieldDecorator<Student>("educationId", {
+                                validateTrigger: this.state.formValidateTrigger,
+                            })(
+                                <Select
+                                    disabled={this.state.isSubmitting}
+                                    loading={this.props.isLoadingEducations}
+                                    allowClear={true}
+                                    showSearch={true}
+                                    filterOption={true}
+                                    optionFilterProp="children"
+                                >
+                                    {this.props.educations.map(this.renderEducationSelectOption)}
+                                </Select>,
+                            )}
+                        </FormItem>
+                        <FormItem label="Bevestiging">
+                            {getFieldDecorator<Student>("isConfirmed", {
+                                validateTrigger: this.state.formValidateTrigger,
+                                valuePropName: "checked",
+                            })(
+                                <Checkbox disabled={this.state.isSubmitting}>Student is bevestigd door de school</Checkbox>,
+                            )}
+                        </FormItem>
+                    </Form>
+                </Modal>
+            </div>
         );
     }
 
@@ -169,6 +172,12 @@ class StudentsFormModal extends React.Component<StudentFormModalProps, IStudents
         );
     }
 
+    private handleKeyDown(event: React.KeyboardEvent): void {
+        if (event.key === "Enter") {
+            this.handleOk();
+        }
+    }
+
     private handleClose(): void {
         this.props.onCloseRequest();
     }