quay/static/directives/create-external-notification-dialog.html

<!-- Modal message dialog -->
<div class="modal fade" id="createNotificationModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <form id="createForm" name="createForm" ng-submit="createNotification()">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-disabled="creating">&times;</button>
          <h4 class="modal-title">
            Create Repository Notification
          </h4>
        </div>
        <div class="modal-body">
          <div class="quay-spinner" ng-show="creating"></div>

          <table style="width: 100%" ng-show="!creating">
            <tr>
              <td style="width: 120px">When this occurs:</td>
              <td>
                <div class="dropdown-select" placeholder="'(Notification Event)'" selected-item="currentEvent.title"
                     handle-item-selected="handleEventSelected(datum)">
                  <!-- Icons -->
                  <i class="dropdown-select-icon fa fa-lg" ng-class="currentEvent.icon"></i>
                  
                  <!-- Dropdown menu -->
                  <ul class="dropdown-select-menu pull-right" role="menu">
                    <li ng-repeat="event in events">
                      <a href="javascript:void(0)" ng-click="setEvent(event)">
                        <i class="fa fa-lg" ng-class="event.icon"></i> {{ event.title }}
                      </a>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>

            <tr>
              <td>Then issue a:</td>
              <td>
                <div class="dropdown-select" placeholder="'(Notification Action)'" selected-item="currentMethod.title"
                     handle-item-selected="handleMethodSelected(datum)">
                  <!-- Icons -->
                  <i class="dropdown-select-icon fa fa-lg" ng-class="currentMethod.icon"></i>
                  
                  <!-- Dropdown menu -->
                  <ul class="dropdown-select-menu pull-right" role="menu">
                    <li ng-repeat="method in methods">
                      <a href="javascript:void(0)" ng-click="setMethod(method)">
                        <i class="fa fa-lg" ng-class="method.icon"></i> {{ method.title }}
                      </a>
                    </li>
                  </ul>
                </div>
              </td>
            </tr>

            <tr ng-if="currentMethod.fields.length"><td colspan="2"><hr></td></tr>

            <tr ng-repeat="field in currentMethod.fields">
              <td>{{ field.title }}:</td>
              <td>
                <div ng-switch on="field.type">
                  <input type="email" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="email" required>
                  <input type="url" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="url" required>
                  <input type="text" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="string" required>
                  <div class="entity-search" namespace="repository.namespace"
                       placeholder="''"
                       current-entity="currentConfig[field.name]"
                       ng-model="currentConfig[field.name]"
                       allowed-entities="['user', 'team']"
                       ng-switch-when="entity">
                </div>
              </td>
            </tr>

            <tr ng-if="currentMethod.id == 'webhook'">
              <td colspan="2">
                <div class="alert alert-info" style="margin-top: 20px; margin-bottom: 0px">
                  JSON metadata representing the event will be <b>POST</b>ed to the URL. 
                  <br><br>
                  The contents for each event can be found in the user guide: 
                  <a href="http://docs.quay.io/guides/notifications.html" target="_blank">http://docs.quay.io/guides/notifications.html</a>
                </div>
              </td>
            </tr>
          </table>
        </div>
        <div class="modal-footer">         
          <button type="submit" class="btn btn-primary"
                  ng-disabled="createForm.$invalid || !currentMethod || !currentEvent || creating">
            Create Notification
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal" ng-disabled="creating">Cancel</button>
        </div>
      </form>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->