2022-05-04 23:29:50 +12:00
<?php
2022-05-06 20:49:37 +12:00
$new = $this->getParam('new', false);
2022-05-04 23:29:50 +12:00
$events = $this->getParam('events', []);
$patterns = [];
foreach ($events as $name => $event) {
2022-05-11 01:21:57 +12:00
$patterns[] = $name;
2022-05-04 23:29:50 +12:00
foreach ($event as $key => $value) {
if (!\str_starts_with($key, '$')) {
if (!($value['$resource'] ?? false)) {
$patterns[] = "{$name}.{$key}";
} else {
2022-05-11 01:21:57 +12:00
$patterns[] = $key;
2022-05-04 23:29:50 +12:00
foreach ($value as $key2 => $value2) {
if (!\str_starts_with($key2, '$')) {
if (!($value2['$resource'] ?? false)) {
$patterns[] = "{$key}.{$key2}";
}
}
}
}
}
}
}
2022-05-11 01:21:57 +12:00
sort($patterns);
2022-05-04 23:29:50 +12:00
?>
< div
data-service="projects.getWebhook"
data-name="project-webhook"
data-scope="console"
data-event="load,projects.createWebhook, projects.deleteWebhook, projects.updateWebhook"
data-param-project-id="{{router.params.project}}"
data-param-webhook-id="{{router.params.id}}"
data-success="trigger"
data-success-param-trigger-events="projects.getWebhook">
< div class = "cover" >
< h1 class = "zone xl margin-bottom-large" >
< a data-ls-attrs = "href=/console/webhooks?project={{router.params.project}}" class = "back text-size-small link-return-animation--start" > < i class = "icon-left-open" > < / i > Webhooks< / a >
< br / >
2022-05-06 20:49:37 +12:00
<?php if ( $new ) : ?>
< span > Add Webhook< / span >
<? else : ?>
< span data-ls-bind = "{{project-webhook.name}} " > < / span >
<?php endif ; ?>
2022-05-04 23:29:50 +12:00
< / h1 >
< / div >
2022-05-09 01:09:08 +12:00
< div class = "zone xl" x-data = "events" >
< h2 class = "margin-top" > Settings< / h2 >
< div class = "row responsive" >
2022-05-04 23:29:50 +12:00
< div class = "col span-8 margin-bottom" >
< label > < / label >
< div class = "box margin-bottom-large" >
2022-05-06 20:49:37 +12:00
< form
2022-05-04 23:29:50 +12:00
data-analytics
data-analytics-activity
data-analytics-event="submit"
data-analytics-category="console"
2022-05-06 20:49:37 +12:00
<?php if ( $new ) : ?>
data-success="alert,trigger,redirect"
data-analytics-label="Create Project Webhook"
data-service="projects.createWebhook"
data-success-param-alert-text="Created webhook successfully"
data-success-param-trigger-events="projects.createWebhook"
data-failure-param-alert-text="Failed to create webhook"
data-success-param-redirect-url="/console/webhooks?project={{router.params.project}}"
<?php else : ?>
data-success="alert,trigger"
data-analytics-label="Update Project Webhook"
data-service="projects.updateWebhook"
data-success-param-alert-text="Updated webhook successfully"
data-success-param-trigger-events="projects.updateWebhook"
data-failure-param-alert-text="Failed to update webhook"
<?php endif ; ?>
2022-05-04 23:29:50 +12:00
data-scope="console"
data-event="submit"
data-failure="alert"
data-failure-param-alert-classname="error">
< input type = "hidden" name = "projectId" data-ls-bind = "{{router.params.project}}" / >
2022-05-06 20:49:37 +12:00
<?php if ( ! $new ) : ?> < input type = "hidden" name = "webhookId" data-ls-bind = "{{project-webhook.$id}}" /> <?php endif ; ?>
2022-05-04 23:29:50 +12:00
< label data-ls-attrs = "for=name-{{webhook.$id}}" > Name< / label >
< input type = "text" class = "full-width" data-ls-attrs = "id=name-{{project-webhook.$id}}" name = "name" required autocomplete = "off" data-ls-bind = "{{project-webhook.name}}" maxlength = "128" / >
< label data-ls-attrs = "for=url-{{webhook.$id}}" > POST URL< / label >
< input type = "url" class = "full-width" data-ls-attrs = "id=url-{{project-webhook.$id}}" name = "url" required autocomplete = "off" placeholder = "https://example.com/callback" data-ls-bind = "{{project-webhook.url}}" / >
2022-06-21 02:24:08 +12:00
< label data-ls-attrs = "for=signatureKey-{{webhook.$id}}" > Signature Key< / label >
< input type = "text" class = "full-width" data-ls-attrs = "id=signatureKey-{{project-webhook.$id}}" name = "signatureKey" required autocomplete = "off" placeholder = "ad3d581ca230e2b7059c545e5a" data-ls-bind = "{{project-webhook.signatureKey}}" / >
2022-05-09 01:09:08 +12:00
< section class = "margin-bottom-small" data-ls-attrs = "x-init=load({{project-webhook.events}})" >
2022-05-13 22:49:37 +12:00
< label class = "margin-bottom-small" > Events < span class = "tooltip small" data-tooltip = "Set events that will trigger your webhook." > < i class = "icon-info-circled" > < / i > < / span > < / label >
< div >
< template x-for = "event in Array.from(events)" >
< div class = "row events responsive thin margin-bottom-small" >
< div class = "col span-12 margin-bottom-small" >
< span class = "text" x-text = "event" > < / span >
< span class = "action" @ click = "removeEvent(event)" >
< i class = "icon-trash" > < / i >
< / span >
< / div >
< input name = "events" data-cast-to = "array" type = "hidden" :value = "event" > < / input >
2022-05-04 23:29:50 +12:00
< / div >
2022-05-13 22:49:37 +12:00
< / template >
< / div >
< button class = "margin-end margin-bottom-small reverse" type = "button" @ click = "showModal($refs.modal_webhook)" > Add Event< / button >
2022-05-04 23:29:50 +12:00
< / section >
< div class = "margin-bottom toggle" data-ls-ui-open data-button-aria = "Advanced Options" >
< i class = "icon-plus pull-end margin-top-tiny" > < / i >
< i class = "icon-minus pull-end margin-top-tiny" > < / i >
< h2 class = "margin-bottom" >
Advanced Options
< small class = "text-size-small" > (optional)< / small >
< / h2 >
< label data-ls-attrs = "for=security-{{project-webhook.$id}}" class = "margin-bottom-small" >
2022-05-13 22:49:37 +12:00
< div class = "margin-bottom-small" > SSL / TLS (Certificate verification)< / div >
2022-05-04 23:29:50 +12:00
2022-05-13 22:49:37 +12:00
< input <?php if ( $new ) : ?> checked <?php else : ?> data-ls-bind = "{{project-webhook.security}}" <?php endif ; ?> name = "security" type = "radio" required data-ls-attrs = "id=secure-yes-{{project-webhook.$id}}" value = "true" data-cast-to = "boolean" /> < span > Enabled</ span >
2022-05-04 23:29:50 +12:00
< input name = "security" type = "radio" required data-ls-attrs = "id=secure-no-{{project-webhook.$id}}" data-ls-bind = "{{project-webhook.security}}" value = "false" data-cast-to = "boolean" / > < span > Disabled< / span >
< / label >
< p class = "margin-bottom text-size-small text-fade" > < span class = "text-red" > Warning< / span > : Untrusted or self-signed certificates may not be secure.
< a href = "https://en.wikipedia.org/wiki/Self-signed_certificate" target = "_blank" rel = "noopener" > Learn more< i class = "icon-link-ext" > < / i > < / a >
< / p >
< label > HTTP Authentication < span class = "tooltip" data-tooltip = "Use to secure your endpoint from untrusted sources" > < i class = "icon-question" > < / i > < / span > < small > (optional)< / small > < / label >
< div class = "row responsive thin" >
< div class = "col span-6 margin-bottom" >
< label data-ls-attrs = "for=httpUser-{{project-webhook.$id}}" > User< / label >
< input type = "text" class = "full-width margin-bottom-no" data-ls-attrs = "id=httpUser-{{project-webhook.$id}}" name = "httpUser" autocomplete = "off" data-ls-bind = "{{project-webhook.httpUser}}" / >
< / div >
< div class = "col span-6 margin-bottom" >
< label data-ls-attrs = "for=httpPass-{{project-webhook.$id}}" > Password< / label >
< input type = "password" data-forms-show-secret class = "full-width margin-bottom-no" data-ls-attrs = "id=httpPass-{{project-webhook.$id}}" name = "httpPass" autocomplete = "off" data-ls-bind = "{{project-webhook.httpPass}}" / >
< / div >
< / div >
< / div >
< footer >
2022-05-06 20:49:37 +12:00
< button type = "submit" > Update< / button >
2022-05-04 23:29:50 +12:00
< / footer >
< / form >
< / div >
< / div >
2022-05-06 20:49:37 +12:00
<?php if ( ! $new ) : ?>
< div class = "col span-4 sticky-top margin-bottom" >
< label > Webhook ID< / label >
< div class = "input-copy margin-bottom" >
< input id = "uid" type = "text" autocomplete = "off" placeholder = "" data-ls-bind = "{{project-webhook.$id}}" disabled data-forms-copy >
< / div >
2022-05-04 23:29:50 +12:00
2022-05-06 20:49:37 +12:00
< form class = "margin-bottom" data-analytics data-analytics-activity data-analytics-event = "submit" data-analytics-category = "console" data-analytics-label = "Delete Project Webhook" data-service = "projects.deleteWebhook" data-scope = "console" data-event = "submit" data-confirm = "Are you sure you want to delete this webhook?" data-success = "alert,redirect" data-success-param-redirect-url = "/console/webhooks?project={{router.params.project}}" data-success-param-alert-text = "Deleted webhook successfully" data-success-param-trigger-events = "projects.deleteWebhook" data-failure = "alert" data-failure-param-alert-text = "Failed to delete webhook" data-failure-param-alert-classname = "error" >
< input type = "hidden" name = "projectId" data-ls-bind = "{{router.params.project}}" / >
< input type = "hidden" name = "webhookId" data-ls-bind = "{{project-webhook.$id}}" / >
< button class = "danger fill" > Delete Webhook< / button >
< / form >
< / div >
<?php endif ; ?>
2022-05-13 22:49:37 +12:00
< div x-ref = "modal_webhook" data-ui-modal class = "modal box close width-small height-small" data-button-hide = "on" >
2022-05-09 01:09:08 +12:00
< div >
2022-05-13 22:49:37 +12:00
< form @ submit . prevent = "addEvent($refs.modal_webhook)" >
< label for = "event" >
Event
< / label >
< select id = "event" x-model = "selected" @ change = "setEvent()" >
2022-05-09 01:09:08 +12:00
< option value = "" selected > Select event< / option >
<?php foreach ( $patterns as $event ) : ?>
< option value = " <?php echo $event ; ?> " > <?php echo $event ; ?> </ option >
<?php endforeach ; ?>
< / select >
< div x-show = "hasResource" >
2022-05-17 00:51:03 +12:00
< label x-text = "resourceName + ' (optional)'" for = "resource" > < / label >
2022-05-13 22:49:37 +12:00
< input id = "resource" type = "text" :placeholder = "resourceName" x-model = "resource" maxlength = "36" pattern = "^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$" >
2022-05-11 01:21:57 +12:00
< div class = "text-fade text-size-xs margin-top-negative-small margin-bottom" > Leave empty for wildcard< / div >
2022-05-09 01:09:08 +12:00
< / div >
< div x-show = "hasSubResource" >
2022-05-17 00:51:03 +12:00
< label x-text = "subResourceName + ' (optional)'" for = "subResource" > < / label >
2022-05-13 22:49:37 +12:00
< input id = "subResource" type = "text" :placeholder = "subResourceName" x-model = "subResource" maxlength = "36" pattern = "^[a-zA-Z0-9][a-zA-Z0-9_-]{0,35}$" >
2022-05-11 01:21:57 +12:00
< div class = "text-fade text-size-xs margin-top-negative-small margin-bottom" > Leave empty for wildcard< / div >
2022-05-09 01:09:08 +12:00
< / div >
< div x-show = "hasAttribute" >
2022-05-13 22:49:37 +12:00
< label for = "attribute" > Add Attribute (optional)< / label >
< select id = "attribute" x-model = "attribute" >
2022-05-09 01:09:08 +12:00
< option value = "*" > Select attribute< / option >
< template x-for = "attr in attributes" >
< option :value = "attr" x-text = "attr" > < / option >
< / template >
< / select >
< / div >
< button x-show = "selected" type = "submit" > Add Event< / button > < button data-ui-modal-close = "" type = "button" class = "reverse" > Cancel< / button >
< / form >
< / div >
< / div >
2022-05-04 23:29:50 +12:00
< / div >
< / div >
2022-05-06 20:49:37 +12:00
< / div >