mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2025-03-14 15:09:59 -04:00
Merge pull request #667 from rschamp/bugfix/647
Add style to general error messages
This commit is contained in:
commit
6f9c16a7a5
4 changed files with 23 additions and 4 deletions
|
@ -2,7 +2,6 @@ var classNames = require('classnames');
|
|||
var Formsy = require('formsy-react');
|
||||
var omit = require('lodash.omit');
|
||||
var React = require('react');
|
||||
var GeneralError = require('./general-error.jsx');
|
||||
var validations = require('./validations.jsx').validations;
|
||||
|
||||
for (var validation in validations) {
|
||||
|
@ -32,8 +31,13 @@ var Form = React.createClass({
|
|||
);
|
||||
return (
|
||||
<Formsy.Form {... this.props} className={classes} ref="formsy" onChange={this.onChange}>
|
||||
<GeneralError name="all" value={this.state.allValues} />
|
||||
{this.props.children}
|
||||
{React.Children.map(this.props.children, function (child) {
|
||||
if (child.props.name === 'all') {
|
||||
return React.cloneElement(child, {value: this.state.allValues});
|
||||
} else {
|
||||
return child;
|
||||
}
|
||||
}.bind(this))}
|
||||
</Formsy.Form>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,6 +1,8 @@
|
|||
var Formsy = require('formsy-react');
|
||||
var React = require('react');
|
||||
|
||||
require('./general-error.scss');
|
||||
|
||||
/*
|
||||
* A special formsy-react component that only outputs
|
||||
* error messages. If you want to display errors that
|
||||
|
@ -12,7 +14,7 @@ module.exports = Formsy.HOC(React.createClass({
|
|||
render: function () {
|
||||
if (!this.props.showError()) return null;
|
||||
return (
|
||||
<p className="error">
|
||||
<p className="general-error">
|
||||
{this.props.getErrorMessage()}
|
||||
</p>
|
||||
);
|
||||
|
|
9
src/components/forms/general-error.scss
Normal file
9
src/components/forms/general-error.scss
Normal file
|
@ -0,0 +1,9 @@
|
|||
@import "../../colors";
|
||||
|
||||
.general-error {
|
||||
border: 1px solid $active-gray;
|
||||
border-radius: 4px;
|
||||
background-color: $ui-orange;
|
||||
padding: 1rem;
|
||||
color: $type-white;
|
||||
}
|
|
@ -12,6 +12,7 @@ var CharCount = require('../../components/forms/charcount.jsx');
|
|||
var Checkbox = require('../../components/forms/checkbox.jsx');
|
||||
var CheckboxGroup = require('../../components/forms/checkbox-group.jsx');
|
||||
var Form = require('../../components/forms/form.jsx');
|
||||
var GeneralError = require('../../components/forms/general-error.jsx');
|
||||
var Input = require('../../components/forms/input.jsx');
|
||||
var PhoneInput = require('../../components/forms/phone-input.jsx');
|
||||
var RadioGroup = require('../../components/forms/radio-group.jsx');
|
||||
|
@ -148,6 +149,7 @@ module.exports = {
|
|||
onChange={this.onChangeShowPassword}
|
||||
help={null}
|
||||
name="showPassword" />
|
||||
<GeneralError name="all" />
|
||||
<NextStepButton waiting={this.props.waiting || this.state.waiting}
|
||||
text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
|
||||
</Form>
|
||||
|
@ -508,6 +510,7 @@ module.exports = {
|
|||
type="text"
|
||||
name="address.zip"
|
||||
required />
|
||||
<GeneralError name="all" />
|
||||
<NextStepButton waiting={this.props.waiting || this.state.waiting}
|
||||
text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
|
||||
</Form>
|
||||
|
@ -631,6 +634,7 @@ module.exports = {
|
|||
equalsField: formatMessage({id: 'general.validationEmailMatch'})
|
||||
}}
|
||||
required />
|
||||
<GeneralError name="all" />
|
||||
<NextStepButton waiting={this.props.waiting}
|
||||
text={<intl.FormattedMessage id="teacherRegistration.nextStep" />} />
|
||||
</Form>
|
||||
|
|
Loading…
Reference in a new issue