diff --git a/frontend/scenes/Settings/Settings.js b/frontend/scenes/Settings/Settings.js index f3d47ef4..9720cd25 100644 --- a/frontend/scenes/Settings/Settings.js +++ b/frontend/scenes/Settings/Settings.js @@ -15,8 +15,8 @@ import SettingsStore from './SettingsStore'; @observer class Settings extends React.Component { store = SettingsStore; - constructor(props) { - super(props); + constructor() { + super(); this.store = new SettingsStore(); } @@ -99,41 +99,59 @@ import SettingsStore from './SettingsStore'; } } -const InlineForm = ({ - placeholder, - buttonLabel, - name, - value, - onChange, - onSubmit, - disabled, -}: { - placeholder: string, - buttonLabel: string, - name: string, - value: string, - onChange: Function, - onSubmit: Function, - disabled?: boolean, -}) => { - const handleSubmit = event => { - event.preventDefault(); - onSubmit(); +class InlineForm extends React.Component { + props: { + placeholder: string, + buttonLabel: string, + name: string, + value: string, + onChange: Function, + onSubmit: Function, + disabled?: boolean, }; - return ( -
- ); -}; + + state = { + validationError: false, + }; + + handleSubmit = event => { + event.preventDefault(); + if (this.props.value) { + this.props.onSubmit(); + } else { + this.setState({ + validationError: true, + }); + setTimeout( + () => + this.setState({ + validationError: false, + }), + 2500 + ); + } + }; + + render() { + const { placeholder, value, onChange, buttonLabel } = this.props; + const { validationError } = this.state; + + return ( + + ); + } +} const TextInput = styled.input` display:flex; @@ -143,10 +161,10 @@ const TextInput = styled.input` padding-left:8px; padding-right:8px; color:inherit; - background-color:rgba(255, 255, 255, .25); + background-color: rgba(255, 255, 255, .25); border-width:1px; border-style:solid; - border-color:rgba(0, 0, 0, .25); + border-color: ${props => (props.validationError ? 'red' : 'rgba(0, 0, 0, .25)')}; border-radius:2px 0 0 2px; `;