| {% extends "base.html" %} |
| {% block title %}{% if webhook %}Edit Webhook{% else %}Add Webhook{% endif %}{% endblock %} |
|
|
| {% block content %} |
| <div class="container my-4"> |
| <div class="row justify-content-center"> |
| <div class="col-lg-8 col-md-10"> |
| <div class="card"> |
| <div class="card-body"> |
| <h2 class="mb-4">{% if webhook %}Edit Webhook{% else %}Add Webhook{% endif %}</h2> |
| <form method="post" action="{% if webhook and webhook.get('id') %}{{ url_for('web.update_webhook_ui', webhook_id=webhook.get('id')) }}{% else %}{{ url_for('web.add_webhook') }}{% endif %}"> |
| <div class="mb-3"> |
| <label for="name" class="form-label">Name</label> |
| <input type="text" class="form-control" id="name" name="name" required value="{{ webhook.get('name') if webhook else '' }}"> |
| </div> |
| <div class="mb-3"> |
| <label for="trigger_type" class="form-label">Trigger Type</label> |
| <select class="form-select" id="trigger_type" name="trigger_type" required onchange="updateTriggerTypeUI()"> |
| <option value="badge" {% if not webhook or webhook.get('trigger_type', 'badge') == 'badge' %}selected{% endif %}>Badge</option> |
| <option value="attestation-condition" {% if webhook and webhook.get('trigger_type') == 'attestation-condition' %}selected{% endif %}>Attestation Condition</option> |
| </select> |
| </div> |
| <div id="badge-trigger-section" style="{% if webhook and webhook.get('trigger_type') == 'attestation-condition' %}display:none;{% endif %}"> |
| <div class="mb-3"> |
| <label for="badge" class="form-label">Badge</label> |
| <select class="form-select" id="badge" name="badge"> |
| {% for badge in badges %} |
| <option value="{{ badge.name }}" {% if webhook and webhook.get('badge') == badge.name %}selected{% endif %}>{{ badge.name }}</option> |
| {% endfor %} |
| </select> |
| </div> |
| <div class="form-check mb-3"> |
| <input class="form-check-input" type="checkbox" id="trigger_non_zero" name="trigger_non_zero" {% if webhook and webhook.get('trigger_non_zero') %}checked{% elif not webhook %}checked{% endif %}> |
| <label class="form-check-label" for="trigger_non_zero"> |
| Trigger on non-zero badge count |
| </label> |
| </div> |
| </div> |
| <div id="attestation-condition-section" style="{% if not webhook or webhook.get('trigger_type', 'badge') == 'badge' %}display:none;{% endif %}"> |
| <label class="form-label">Attestation Conditions</label> |
| <div id="conditions-list"> |
| {% if webhook and webhook.get('attestation_conditions') %} |
| {% for cond in webhook.get('attestation_conditions') %} |
| <div class="row mb-2 condition-row"> |
| <div class="col"> |
| <input type="text" class="form-control" name="condition_field" placeholder="Field" value="{{ cond.field }}"> |
| </div> |
| <div class="col"> |
| <input type="text" class="form-control" name="condition_value" placeholder="Value (comma for list)" value="{{ cond.value }}"> |
| </div> |
| <div class="col-auto"> |
| <button type="button" class="btn btn-danger btn-sm" onclick="removeConditionRow(this)">Remove</button> |
| </div> |
| </div> |
| {% endfor %} |
| {% endif %} |
| </div> |
| <button type="button" class="btn btn-secondary btn-sm" onclick="addConditionRow()">Add Condition</button> |
| <small class="form-text text-muted"> |
| Each condition is ANDed. For a list-typed context field, the value must be in the list. |
| </small> |
| </div> |
| <div class="mb-3"> |
| <label for="url" class="form-label">Webhook URL</label> |
| <input type="url" class="form-control" id="url" name="url" required value="{{ webhook.get('url') if webhook else 'https://httpbin.org/post' }}"> |
| </div> |
| <div class="mb-3"> |
| <label for="method" class="form-label">HTTP Method</label> |
| <select class="form-select" id="method" name="method"> |
| <option value="POST" {% if webhook and webhook.method == 'POST' %}selected{% endif %}>POST</option> |
| <option value="GET" {% if webhook and webhook.method == 'GET' %}selected{% endif %}>GET</option> |
| <option value="PUT" {% if webhook and webhook.method == 'PUT' %}selected{% endif %}>PUT</option> |
| <option value="DELETE" {% if webhook and webhook.method == 'DELETE' %}selected{% endif %}>DELETE</option> |
| </select> |
| </div> |
| <div class="mb-3"> |
| <label for="headers" class="form-label">Headers (JSON)</label> |
| <textarea class="form-control" id="headers" name="headers" rows="3" placeholder='{"Authorization": "Bearer ..."}'>{% if webhook and webhook.headers %}{{ webhook.headers }}{% endif %}</textarea> |
| </div> |
| <div class="mb-3"> |
| <label for="content" class="form-label">Content Template (JSON)</label> |
| <textarea class="form-control" id="content" name="content" rows="5" placeholder='{"key":"value", "attestation":{attestation_details}}'>{% if webhook and webhook.content %}{{ webhook.content }}{% else %}{"attestation":{attestation_details}}{% endif %}</textarea> |
| <small class="form-text text-muted"> |
| <b>Templating:</b> Use variables in the form <code>--varname--</code> (two dashes, name, two dashes) anywhere in the URL, headers, or content.<br> |
| <b>Supported variables:</b> |
| <ul> |
| <li><code>product-key</code> (product key string), <code>product-version</code> (product version string)</li> |
| <li><code>attestation_raw</code> (raw file content, as bytes), <code>attestation_predicate</code> (decoded predicate), <code>attestation_predicate_base64</code> (base64-encoded predicate)</li> |
| <li>Any context field: <code>--contextkey--</code> (empty string if missing)</li> |
| <li>Labels: <code>--labels.labelname--</code> (gets value for label <code>labelname</code>, empty if not found)</li> |
| </ul> |
| <b>Examples:</b> |
| <ul> |
| <li><code>{"Authorization": "Bearer --secret--"}</code> → <code>{"Authorization": "Bearer ghpat-1232455"}</code></li> |
| <li><code>{"predicate": --attestation_predicate--}</code> → <code>{"predicate": { ... }}</code></li> |
| </ul> |
| If a variable is not found, it is replaced with an empty string. |
| </small> |
| </div> |
| <div class="mb-3"> |
| <label for="secret" class="form-label">Secret (optional)</label> |
| <input type="text" class="form-control" id="secret" name="secret" value="{{ webhook.get('secret') if webhook else '' }}"> |
| </div> |
| <div class="form-check mb-3"> |
| <input class="form-check-input" type="checkbox" id="is_active" name="is_active" {% if webhook and webhook.get('is_active') %}checked{% elif not webhook %}checked{% endif %}> |
| <label class="form-check-label" for="is_active">Active</label> |
| </div> |
| <div class="d-flex gap-2"> |
| <button type="submit" class="btn btn-primary">{% if webhook and webhook.get('id') %}Save Changes{% else %}Create Webhook{% endif %}</button> |
| <a href="{{ url_for('web.webhooks') }}" class="btn btn-secondary">Cancel</a> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| function updateTriggerTypeUI() { |
| var triggerType = document.getElementById('trigger_type').value; |
| document.getElementById('badge-trigger-section').style.display = (triggerType === 'badge') ? '' : 'none'; |
| document.getElementById('attestation-condition-section').style.display = (triggerType === 'attestation-condition') ? '' : 'none'; |
| } |
| function addConditionRow() { |
| var list = document.getElementById('conditions-list'); |
| var row = document.createElement('div'); |
| row.className = 'row mb-2 condition-row'; |
| row.innerHTML = ` |
| <div class="col"> |
| <input type="text" class="form-control" name="condition_field" placeholder="Field"> |
| </div> |
| <div class="col"> |
| <input type="text" class="form-control" name="condition_value" placeholder="Value (comma for list)"> |
| </div> |
| <div class="col-auto"> |
| <button type="button" class="btn btn-danger btn-sm" onclick="removeConditionRow(this)">Remove</button> |
| </div> |
| `; |
| list.appendChild(row); |
| } |
| function removeConditionRow(btn) { |
| btn.closest('.condition-row').remove(); |
| } |
| window.addEventListener('DOMContentLoaded', function() { |
| updateTriggerTypeUI(); |
| }); |
| </script> |
| {% endblock %} |
|
|
