diff --git a/client/src/components/formHelpers/Form.test.js b/client/src/components/formHelpers/Form.test.js
index e0cb43e723..573a6b4c0d 100644
--- a/client/src/components/formHelpers/Form.test.js
+++ b/client/src/components/formHelpers/Form.test.js
@@ -8,7 +8,10 @@ import Form from './Form';
const defaultTestProps = {
buttonText: 'Submit',
- formFields: ['name', 'website'],
+ formFields: [
+ { name: 'name', label: 'name Label' },
+ { name: 'website', label: 'WebSite label' }
+ ],
id: 'my-test-form',
options: {
types: {
@@ -23,11 +26,11 @@ const defaultTestProps = {
test('should render', () => {
const { getByLabelText, getByText } = render();
- const nameInput = getByLabelText(/name/i);
+ const nameInput = getByLabelText(/name Label/);
expect(nameInput).not.toBeRequired();
expect(nameInput).toHaveAttribute('type', 'text');
- const websiteInput = getByLabelText(/website/i);
+ const websiteInput = getByLabelText(/WebSite label/);
expect(websiteInput).toBeRequired();
expect(websiteInput).toHaveAttribute('type', 'url');
@@ -48,10 +51,10 @@ test('should render with default values', () => {
/>
);
- const nameInput = getByLabelText(/name/i);
+ const nameInput = getByLabelText(/name Label/);
expect(nameInput).toHaveValue(nameValue);
- const websiteInput = getByLabelText(/website/i);
+ const websiteInput = getByLabelText(/WebSite label/);
expect(websiteInput).toHaveValue(websiteValue);
const button = getByText(/submit/i);
@@ -68,7 +71,7 @@ test('should submit', () => {
const { getByLabelText, getByText } = render();
- const websiteInput = getByLabelText(/website/i);
+ const websiteInput = getByLabelText(/WebSite label/);
fireEvent.change(websiteInput, { target: { value: websiteValue } });
expect(websiteInput).toHaveValue(websiteValue);
diff --git a/client/src/components/formHelpers/FormFields.js b/client/src/components/formHelpers/FormFields.js
index a0b9b606ae..485f59ce61 100644
--- a/client/src/components/formHelpers/FormFields.js
+++ b/client/src/components/formHelpers/FormFields.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { kebabCase, startCase } from 'lodash';
+import { kebabCase } from 'lodash';
import PropTypes from 'prop-types';
import {
Alert,
@@ -12,7 +12,10 @@ import {
import { Field } from 'react-final-form';
const propTypes = {
- fields: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+ formFields: PropTypes.arrayOf(
+ PropTypes.shape({ name: PropTypes.string, label: PropTypes.string })
+ .isRequired
+ ).isRequired,
options: PropTypes.shape({
ignored: PropTypes.arrayOf(PropTypes.string),
placeholders: PropTypes.objectOf(PropTypes.string),
@@ -22,19 +25,20 @@ const propTypes = {
};
function FormFields(props) {
- const { fields, options = {} } = props;
+ const { formFields, options = {} } = props;
const {
ignored = [],
placeholders = {},
required = [],
types = {}
} = options;
+
return (
- {fields
- .filter(field => !ignored.includes(field))
- .map(name => (
-
+ {formFields
+ .filter(formField => !ignored.includes(formField.name))
+ .map(({ name, label }) => (
+
{({ input: { value, onChange }, meta: { pristine, error } }) => {
const key = kebabCase(name);
const type = name in types ? types[name] : 'text';
@@ -44,9 +48,7 @@ function FormFields(props) {
{type === 'hidden' ? null : (
-
- {startCase(name)}
-
+ {label}
)}
Any) => (value: Any) => Any
export function callIfDefined(fn) {
return value => (value ? fn(value) : value);
@@ -24,7 +23,6 @@ export function formatUrlValues(values, options) {
return { ...result, [key]: value };
}, {});
}
-
// formatUrl(url: String) => String
export function formatUrl(url) {
if (typeof url === 'string' && url.length > 4 && url.indexOf('.') !== -1) {
@@ -41,21 +39,17 @@ export function formatUrl(url) {
}
return url;
}
-
export function isValidURL(data) {
/* eslint-disable camelcase */
return isURL(data, { require_protocol: true });
/* eslint-enable camelcase */
}
-
export function makeOptional(validator) {
return val => (val ? validator(val) : true);
}
-
export function makeRequired(validator) {
return val => (val ? validator(val) : false);
}
-
export function createFormValidator(fieldValidators) {
const fieldKeys = Object.keys(fieldValidators);
return values =>
@@ -69,7 +63,6 @@ export function createFormValidator(fieldValidators) {
.filter(Boolean)
.reduce((errors, error) => ({ ...errors, ...error }), {});
}
-
export function getValidationState(field) {
if (field.pristine) {
return null;
diff --git a/client/src/components/settings/Certification.js b/client/src/components/settings/Certification.js
index dc058b0b25..f47da57f67 100644
--- a/client/src/components/settings/Certification.js
+++ b/client/src/components/settings/Certification.js
@@ -415,6 +415,11 @@ export class CertificationSettings extends Component {
{ types: {} }
);
+ const formFields = challengeTitles.map(title => ({
+ name: title,
+ label: title
+ }));
+
const fullForm = filledforms === challengeTitles.length;
const createClickHandler = certLocation => e => {
@@ -436,7 +441,7 @@ export class CertificationSettings extends Component {