Better fields validation, visual improvements

ReCodEx · Dec 7, 2017 · 967467b · 967467b
1 parent 18a228f
commit 967467b
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 34 deletions.
diff --git a/src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigForm.css b/src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigForm.css
@@ -0,0 +1,7 @@
+.configRow {
+  padding: 15px;
+}
+
+.configRow:nth-child(odd) {
+  background-color: #F9F9F9;
+}
diff --git a/src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigForm.js b/src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigForm.js
@@ -32,6 +32,7 @@ const EditExerciseSimpleConfigForm = ({
       />
     }
     unlimitedHeight
+    noPadding
     success={submitSucceeded}
     dirty={dirty}
     footer={

diff --git a/src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigTest.js b/src/components/forms/EditExerciseSimpleConfigForm/EditExerciseSimpleConfigTest.js
@@ -12,6 +12,8 @@ import {
   CheckboxField
 } from '../Fields';
 
+import './EditExerciseSimpleConfigForm.css';
+
 const messages = defineMessages({
   normal: {
     id: 'recodex-judge-normal',
@@ -69,7 +71,7 @@ const EditExerciseSimpleConfigTest = ({
       }))
   );
   return (
-    <div>
+    <div className="configRow">
       <Row>
         <Col lg={12}>
           <h3>

diff --git a/src/components/forms/EditSimpleLimitsForm/EditSimpleLimitsForm.js b/src/components/forms/EditSimpleLimitsForm/EditSimpleLimitsForm.js
@@ -38,6 +38,7 @@ const EditSimpleLimitsForm = ({
       />
     }
     unlimitedHeight
+    noPadding
     success={submitSucceeded}
     dirty={dirty}
     footer={

diff --git a/src/components/forms/Fields/ExpandingInputFilesField.js b/src/components/forms/Fields/ExpandingInputFilesField.js
@@ -61,7 +61,7 @@ class ExpandingInputFilesField extends Component {
       leftLabel = '',
       rightLabel = '',
       input: { onChange, ...input },
-      meta: { touched, error },
+      meta: { dirty, error },
       style = {},
       options,
       ...props
@@ -71,7 +71,7 @@ class ExpandingInputFilesField extends Component {
     return (
       <FormGroup
         controlId={input.name}
-        validationState={error ? (touched ? 'error' : 'warning') : undefined}
+        validationState={error ? 'error' : dirty ? 'warning' : undefined}
       >
         <Row>
           <Col sm={6}>
@@ -119,12 +119,7 @@ class ExpandingInputFilesField extends Component {
         </Row>
         {error &&
           <HelpBlock>
-            {' '}{touched
-              ? error
-              : <FormattedMessage
-                  defaultMessage="This field is required."
-                  id="app.field.isRequired"
-                />}{' '}
+            {' '}{error}{' '}
           </HelpBlock>}
       </FormGroup>
     );

diff --git a/src/components/forms/Fields/ExpandingSelectField.js b/src/components/forms/Fields/ExpandingSelectField.js
@@ -45,7 +45,7 @@ class ExpandingSelectField extends Component {
     const {
       label = '',
       input: { name, onChange },
-      meta: { touched, error },
+      meta: { dirty, error },
       options,
       style = {},
       ...props
@@ -55,7 +55,7 @@ class ExpandingSelectField extends Component {
     return (
       <FormGroup
         controlId={name}
-        validationState={error ? (touched ? 'error' : 'warning') : undefined}
+        validationState={error ? 'error' : dirty ? 'warning' : undefined}
       >
         <ControlLabel>{label}</ControlLabel>
         <div style={style}>
@@ -78,12 +78,7 @@ class ExpandingSelectField extends Component {
         </div>{' '}
         {error &&
           <HelpBlock>
-            {' '}{touched
-              ? error
-              : <FormattedMessage
-                  defaultMessage="This field is required."
-                  id="app.field.isRequired"
-                />}{' '}
+            {' '}{error}{' '}
           </HelpBlock>}
       </FormGroup>
     );

diff --git a/src/components/forms/Fields/ExpandingTextField.js b/src/components/forms/Fields/ExpandingTextField.js
@@ -49,7 +49,7 @@ class ExpandingTextField extends Component {
     const {
       label = '',
       input: { onChange },
-      meta: { touched, error },
+      meta: { dirty, error },
       style = {},
       ...props
     } = this.props;
@@ -58,7 +58,7 @@ class ExpandingTextField extends Component {
     return (
       <FormGroup
         controlId={'value'}
-        validationState={error ? (touched ? 'error' : 'warning') : undefined}
+        validationState={error ? 'error' : dirty ? 'warning' : undefined}
       >
         <ControlLabel>{label}</ControlLabel>
         <div style={style}>
@@ -75,12 +75,7 @@ class ExpandingTextField extends Component {
         </div>{' '}
         {error &&
           <HelpBlock>
-            {' '}{touched
-              ? error
-              : <FormattedMessage
-                  defaultMessage="This field is required."
-                  id="app.field.isRequired"
-                />}{' '}
+            {' '}{error}{' '}
           </HelpBlock>}
       </FormGroup>
     );

diff --git a/src/components/forms/Fields/SelectField.js b/src/components/forms/Fields/SelectField.js
@@ -11,7 +11,7 @@ import {
 
 const SelectField = ({
   input,
-  meta: { touched, error },
+  meta: { touched, dirty, error },
   label,
   options,
   addEmptyOption = false,
@@ -20,7 +20,7 @@ const SelectField = ({
 }) =>
   <FormGroup
     controlId={input.name}
-    validationState={error ? (touched ? 'error' : 'warning') : undefined}
+    validationState={error ? 'error' : dirty ? 'warning' : undefined}
   >
     <ControlLabel>
       {label}
@@ -38,20 +38,19 @@ const SelectField = ({
     </FormControl>
     {error &&
       <HelpBlock>
-        {touched
-          ? error
-          : <FormattedMessage
-              defaultMessage="This field is required."
-              id="app.field.isRequired"
-            />}
+        {' '}{error}{' '}
       </HelpBlock>}
   </FormGroup>;
 
 SelectField.propTypes = {
   input: PropTypes.shape({
     name: PropTypes.string.isRequired
   }).isRequired,
-  meta: PropTypes.shape({ error: PropTypes.any, touched: PropTypes.bool }),
+  meta: PropTypes.shape({
+    error: PropTypes.any,
+    dirty: PropTypes.bool,
+    touched: PropTypes.bool
+  }),
   type: PropTypes.string,
   label: PropTypes.oneOfType([
     PropTypes.string,