diff --git a/src/components/forms/ApplicationForm.js b/src/components/forms/ApplicationForm.js index eeb9a28..15dfc15 100644 --- a/src/components/forms/ApplicationForm.js +++ b/src/components/forms/ApplicationForm.js @@ -21,16 +21,17 @@ const ApplicationForm = props => { // Refs const refName = useRef(null); + const refAccount = useRef(null); const refCallWebhook = useRef(null); const refCallWebhookUser = useRef(null); const refCallWebhookPass = useRef(null); const refStatusWebhook = useRef(null); const refStatusWebhookUser = useRef(null); const refStatusWebhookPass = useRef(null); - const refAccount = useRef(null); // Form inputs const [ name, setName ] = useState(''); + const [ accountSid, setAccountSid ] = useState(''); const [ callWebhook, setCallWebhook ] = useState(''); const [ callWebhookMethod, setCallWebhookMethod ] = useState('POST'); const [ callWebhookUser, setCallWebhookUser ] = useState(''); @@ -44,17 +45,16 @@ const ApplicationForm = props => { const [ speechSynthesisVoice, setSpeechSynthesisVoice ] = useState('en-US-Standard-C'); const [ speechRecognizerVendor, setSpeechRecognizerVendor ] = useState('google'); const [ speechRecognizerLanguage, setSpeechRecognizerLanguage ] = useState('en-US'); - const [ accountSid, setAccountSid ] = useState(''); // Invalid form inputs const [ invalidName, setInvalidName ] = useState(false); + const [ invalidAccount, setInvalidAccount ] = useState(false); const [ invalidCallWebhook, setInvalidCallWebhook ] = useState(false); const [ invalidCallWebhookUser, setInvalidCallWebhookUser ] = useState(false); const [ invalidCallWebhookPass, setInvalidCallWebhookPass ] = useState(false); const [ invalidStatusWebhook, setInvalidStatusWebhook ] = useState(false); const [ invalidStatusWebhookUser, setInvalidStatusWebhookUser ] = useState(false); const [ invalidStatusWebhookPass, setInvalidStatusWebhookPass ] = useState(false); - const [ invalidAccount, setInvalidAccount ] = useState(false); const [ showLoader, setShowLoader ] = useState(true); const [ errorMessage, setErrorMessage ] = useState(''); @@ -204,13 +204,13 @@ const ApplicationForm = props => { e.preventDefault(); setErrorMessage(''); setInvalidName(false); + setInvalidAccount(false); setInvalidCallWebhook(false); setInvalidCallWebhookUser(false); setInvalidCallWebhookPass(false); setInvalidStatusWebhook(false); setInvalidStatusWebhookUser(false); setInvalidStatusWebhookPass(false); - setInvalidAccount(false); let errorMessages = []; let focusHasBeenSet = false; @@ -225,6 +225,15 @@ const ApplicationForm = props => { // check if name is already in use + if ((props.type === 'add' || props.type === 'edit') && !accountSid) { + errorMessages.push('Please choose an account for this application to be associated with.'); + setInvalidAccount(true); + if (!focusHasBeenSet) { + refAccount.current.focus(); + focusHasBeenSet = true; + } + } + if (!callWebhook) { errorMessages.push('Please enter a Calling Webhook.'); setInvalidCallWebhook(true); @@ -271,15 +280,6 @@ const ApplicationForm = props => { } } - if ((props.type === 'add' || props.type === 'edit') && !accountSid) { - errorMessages.push('Please choose an account for this application to be associated with.'); - setInvalidAccount(true); - if (!focusHasBeenSet) { - refAccount.current.focus(); - focusHasBeenSet = true; - } - } - if (errorMessages.length > 1) { setErrorMessage(errorMessages); return; @@ -385,6 +385,36 @@ const ApplicationForm = props => { autoFocus ref={refName} /> + +
+ + +
)} @@ -669,39 +699,6 @@ const ApplicationForm = props => { - {(props.type === 'add' || props.type === 'edit') && ( - -
- - -
- )} - {errorMessage && ( )}