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

<!-- Modal message dialog -->
<div class="co-dialog 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">
            <i class="fa fa-bell"></i> Create Repository Notification
          </h4>
        </div>
        <div class="modal-body">
          <!-- Creating spinner -->
          <div class="cor-loader" ng-show="status == 'creating' || status == 'authorizing-email'"></div>

          <!-- Authorize e-mail view -->
          <div ng-show="status == 'authorizing-email-sent'">
            An e-mail has been sent to <code>{{ currentConfig.email }}</code>. Please click the link contained
            in the e-mail.
            <br><br>
            <span class="cor-loader-inline"></span>
          </div>

          <!-- Authorize e-mail view -->
          <div ng-show="status == 'unauthorized-email'">
            The e-mail address <code>{{ currentConfig.email }}</code> has not been authorized to receive
            notifications from this repository. Please click "Send Authorization E-mail" below to start
            the authorization process.
          </div>

          <!-- Create View -->
          <div class="options-table-wrapper">
            <table class="options-table" ng-show="status == ''">
              <tr>
                <td class="name">Notification title:</td>
                <td>
                  <input class="form-control" type="text" placeholder="(Optional Title)" ng-model="currentTitle">
                </td>
              </tr>
            </table>

            <table class="options-table" ng-show="status == ''">
              <tr>
                <td class="name">When this occurs:</td>
                <td>
                  <div class="dropdown-select" placeholder="'(Notification Event)'" selected-item="currentEvent.title"
                       handle-item-selected="handleEventSelected(datum)" clear-value="clearCounter">
                    <!-- 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 ng-repeat="field in currentEvent.fields">
                <td class="name" valign="top">With {{ field.title }} of:</td>
                <td>
                  <div ng-switch on="field.type">
                    <select class="form-control" ng-if="field.type == 'enum'"
                            ng-model="currentEventConfig[field.name]" required>
                      <option ng-repeat="(key, info) in field.values | orderObjectBy: 'index'" value="{{key}}">{{ info.title }}</option>
                    </select>

                    <div class="co-alert co-alert-info"
                         style="margin-top: 6px; margin-bottom: 10px;"
                         ng-if="field.values[currentEventConfig[field.name]].description">
                      {{ field.values[currentEventConfig[field.name]].description }}
                    </div>
                  </div>
                </td>
              </tr>
            </table>

            <table class="options-table" ng-show="status == ''">
              <tr>
                <td class="name">Then issue a:</td>
                <td>
                  <div class="dropdown-select" placeholder="'(Notification Action)'" selected-item="currentMethod.title"
                       handle-item-selected="handleMethodSelected(datum)" clear-value="clearCounter">
                    <!-- 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-repeat="field in currentMethod.fields">
                <td valign="top" class="name">{{ field.title }}:</td>
                <td>
                  <div ng-switch on="field.type">
                    <span ng-switch-when="email">
                      <input type="email" class="form-control" ng-model="currentConfig[field.name]" required>
                    </span>
                    <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>
                    <!-- TODO(jschorr): unify the ability to create an input box with all the usual features -->
                    <div ng-switch-when="regex">
                      <input type="text" class="form-control" ng-model="currentConfig[field.name]"
                             ng-pattern="getPattern(field)"
                             placeholder="{{ field.placeholder }}"
                             ng-name="field.name"
                             id="{{ field.name }}"
                             required>

                      <div class="alert alert-warning" style="margin-top: 10px; margin-bottom: 10px"
                            ng-if="field.regex_fail_message && hasRegexMismatch(createForm.$error, field.name)">
                        <span ng-bind-html="field.regex_fail_message"></span>
                      </div>
                    </div>
                    <div class="entity-search" namespace="repository.namespace"
                         placeholder="''"
                         current-entity="currentConfig[field.name]"
                         ng-model="currentConfig[field.name]"
                         allowed-entities="['user', 'team', 'org']"
                         ng-switch-when="entity"></div>

                    <div ng-if="getHelpUrl(field, currentConfig)"
                         style="margin-top: 10px;  margin-bottom: 10px">
                      See: <a href="{{ getHelpUrl(field, currentConfig) }}" target="_blank">{{ getHelpUrl(field, currentConfig) }}</a>
                    </div>

                    <div class="co-alert co-alert-info" ng-if="currentMethod.id == 'webhook'"
                         style="margin-top: 6px; 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#webhook{{ currentEvent.id ? '_' + currentEvent.id : '' }}"
                         target="_blank">
                        http://docs.quay.io/guides/notifications.html
                      </a>
                    </div>
                  </div>
                </td>
              </tr>
            </table>
          </div>
       </div>

        <!-- Auth e-mail button bar -->
        <div class="modal-footer" ng-if="status == 'unauthorized-email'">
          <button type="button" class="btn btn-success" ng-click="sendAuthEmail()">
            Send Authorization E-mail
          </button>
          <button type="button" class="btn btn-default" data-dismiss="modal" ng-disabled="creating">Cancel</button>
        </div>

        <!-- Normal button bar -->
        <div class="modal-footer" ng-if="status == '' || status == 'creating'">
          <button type="submit" class="btn btn-primary"
                  ng-disabled="createForm.$invalid || !currentMethod.id || !currentEvent.id || 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 -->