mirror of
https://github.com/jambonz/jambonz-webapp.git
synced 2026-07-04 19:21:58 +00:00
Implement messaging webhook fields on add/edit application forms
This commit is contained in:
James Nuanez
@@ -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 => {
|
||||
|
||||
<hr />
|
||||
|
||||
<Label htmlFor="messagingWebhook">Messaging Webhook</Label>
|
||||
<InputGroup>
|
||||
<Input
|
||||
large={props.type === 'setup'}
|
||||
name="messagingWebhook"
|
||||
id="messagingWebhook"
|
||||
value={messagingWebhook}
|
||||
onChange={e => setMessagingWebhook(e.target.value)}
|
||||
placeholder="URL for your web application that will receive SMS"
|
||||
/>
|
||||
|
||||
<Label
|
||||
middle
|
||||
htmlFor="messagingWebhookMethod"
|
||||
>
|
||||
Method
|
||||
</Label>
|
||||
<Select
|
||||
large={props.type === 'setup'}
|
||||
name="messagingWebhookMethod"
|
||||
id="messagingWebhookMethod"
|
||||
value={messagingWebhookMethod}
|
||||
onChange={e => setMessagingWebhookMethod(e.target.value)}
|
||||
>
|
||||
<option value="POST">POST</option>
|
||||
<option value="GET">GET</option>
|
||||
</Select>
|
||||
</InputGroup>
|
||||
|
||||
{showMessagingAuth ? (
|
||||
<InputGroup>
|
||||
<Label indented htmlFor="messagingWebhookUser">User</Label>
|
||||
<Input
|
||||
large={props.type === 'setup'}
|
||||
name="messagingWebhookUser"
|
||||
id="messagingWebhookUser"
|
||||
value={messagingWebhookUser}
|
||||
onChange={e => setMessagingWebhookUser(e.target.value)}
|
||||
placeholder="Optional"
|
||||
invalid={invalidMessagingWebhookUser}
|
||||
ref={refMessagingWebhookUser}
|
||||
/>
|
||||
<Label htmlFor="messagingWebhookPass" middle>Password</Label>
|
||||
<PasswordInput
|
||||
large={props.type === 'setup'}
|
||||
allowShowPassword
|
||||
name="messagingWebhookPass"
|
||||
id="messagingWebhookPass"
|
||||
password={messagingWebhookPass}
|
||||
setPassword={setMessagingWebhookPass}
|
||||
setErrorMessage={setErrorMessage}
|
||||
placeholder="Optional"
|
||||
invalid={invalidMessagingWebhookPass}
|
||||
ref={refMessagingWebhookPass}
|
||||
/>
|
||||
</InputGroup>
|
||||
) : (
|
||||
<Button
|
||||
text
|
||||
formLink
|
||||
type="button"
|
||||
onClick={toggleMessagingAuth}
|
||||
>
|
||||
Use HTTP Basic Authentication
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<hr />
|
||||
|
||||
<Label htmlFor="speechSynthesisVendor">Speech Synthesis Vendor</Label>
|
||||
<InputGroup>
|
||||
<Select
|
||||
|
||||
Reference in New Issue
Block a user