diff --git a/src/components/forms/ApplicationForm.js b/src/components/forms/ApplicationForm.js index 40371b6..c3fec3f 100644 --- a/src/components/forms/ApplicationForm.js +++ b/src/components/forms/ApplicationForm.js @@ -29,6 +29,8 @@ const ApplicationForm = props => { const refStatusWebhook = useRef(null); const refStatusWebhookUser = useRef(null); const refStatusWebhookPass = useRef(null); + const refMessagingWebhookUser = useRef(null); + const refMessagingWebhookPass = useRef(null); // Form inputs const [ name, setName ] = useState(''); @@ -41,6 +43,10 @@ const ApplicationForm = props => { const [ statusWebhookMethod, setStatusWebhookMethod ] = useState('POST'); const [ statusWebhookUser, setStatusWebhookUser ] = useState(''); const [ statusWebhookPass, setStatusWebhookPass ] = useState(''); + const [ messagingWebhook, setMessagingWebhook ] = useState(''); + const [ messagingWebhookMethod, setMessagingWebhookMethod ] = useState('POST'); + const [ messagingWebhookUser, setMessagingWebhookUser ] = useState(''); + const [ messagingWebhookPass, setMessagingWebhookPass ] = useState(''); const [ speechSynthesisVendor, setSpeechSynthesisVendor ] = useState('google'); const [ speechSynthesisLanguage, setSpeechSynthesisLanguage ] = useState('en-US'); const [ speechSynthesisVoice, setSpeechSynthesisVoice ] = useState('en-US-Standard-C'); @@ -48,14 +54,16 @@ const ApplicationForm = props => { const [ speechRecognizerLanguage, setSpeechRecognizerLanguage ] = useState('en-US'); // 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 [ 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 [ invalidMessagingWebhookUser, setInvalidMessagingWebhookUser ] = useState(false); + const [ invalidMessagingWebhookPass, setInvalidMessagingWebhookPass ] = useState(false); const [ showLoader, setShowLoader ] = useState(true); const [ errorMessage, setErrorMessage ] = useState(''); @@ -66,6 +74,9 @@ const ApplicationForm = props => { const [ showStatusAuth, setShowStatusAuth ] = useState(false); const toggleStatusAuth = () => setShowStatusAuth(!showStatusAuth); + const [ showMessagingAuth, setShowMessagingAuth ] = useState(false); + const toggleMessagingAuth = () => setShowMessagingAuth(!showMessagingAuth); + const [ accounts, setAccounts ] = useState([]); const [ applications, setApplications ] = useState([]); const [ applicationSid, setApplicationSid ] = useState([]); @@ -167,6 +178,10 @@ const ApplicationForm = props => { setStatusWebhookMethod( (app.call_status_hook && app.call_status_hook.method) || 'post'); setStatusWebhookUser( (app.call_status_hook && app.call_status_hook.username) || ''); setStatusWebhookPass( (app.call_status_hook && app.call_status_hook.password) || ''); + setMessagingWebhook( (app.messaging_hook && app.messaging_hook.url) || ''); + setMessagingWebhookMethod( (app.messaging_hook && app.messaging_hook.method) || 'post'); + setMessagingWebhookUser( (app.messaging_hook && app.messaging_hook.username) || ''); + setMessagingWebhookPass( (app.messaging_hook && app.messaging_hook.password) || ''); setSpeechSynthesisVendor( app.speech_synthesis_vendor || ''); setSpeechSynthesisLanguage( app.speech_synthesis_language || ''); setSpeechSynthesisVoice( app.speech_synthesis_voice || ''); @@ -187,6 +202,13 @@ const ApplicationForm = props => { ) { setShowStatusAuth(true); } + + if ( + (app.messaging_hook && app.messaging_hook.username) || + (app.messaging_hook && app.messaging_hook.password) + ) { + setShowMessagingAuth(true); + } } } setShowLoader(false); @@ -230,6 +252,8 @@ const ApplicationForm = props => { setInvalidStatusWebhook(false); setInvalidStatusWebhookUser(false); setInvalidStatusWebhookPass(false); + setInvalidMessagingWebhookUser(false); + setInvalidMessagingWebhookPass(false); let errorMessages = []; let focusHasBeenSet = false; @@ -299,6 +323,20 @@ const ApplicationForm = props => { } } + if ((messagingWebhookUser && !messagingWebhookPass) || (!messagingWebhookUser && messagingWebhookPass)) { + errorMessages.push('Messaging Webhook username and password must be either both filled out or both empty.'); + setInvalidMessagingWebhookUser(true); + setInvalidMessagingWebhookPass(true); + if (!focusHasBeenSet) { + if (!messagingWebhookUser) { + refMessagingWebhookUser.current.focus(); + } else { + refMessagingWebhookPass.current.focus(); + } + focusHasBeenSet = true; + } + } + if (errorMessages.length > 1) { setErrorMessage(errorMessages); return; @@ -335,6 +373,12 @@ const ApplicationForm = props => { username: statusWebhookUser.trim() || null, password: statusWebhookPass || null, }, + messaging_hook: { + url: messagingWebhook.trim(), + method: messagingWebhookMethod, + username: messagingWebhookUser.trim() || null, + password: messagingWebhookPass || null, + }, speech_synthesis_vendor: speechSynthesisVendor, speech_synthesis_language: speechSynthesisLanguage, speech_synthesis_voice: speechSynthesisVoice, @@ -604,6 +648,75 @@ const ApplicationForm = props => {
+ + + setMessagingWebhook(e.target.value)} + placeholder="URL for your web application that will receive SMS" + /> + + + + + + {showMessagingAuth ? ( + + + setMessagingWebhookUser(e.target.value)} + placeholder="Optional" + invalid={invalidMessagingWebhookUser} + ref={refMessagingWebhookUser} + /> + + + + ) : ( + + )} + +
+