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">
          <!-- 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 -->
          <table style="width: 100%" ng-show="status == ''">
            <tr>
              <td style="width: 120px">Notification title:</td>
              <td style="padding-right: 21px;">
                <input class="form-control" type="text" placeholder="(Optional Title)" ng-model="currentTitle"
                       style="margin: 10px;">
              </td>
            </tr>

            <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)" 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>
              <td>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-if="currentMethod.fields.length"><td colspan="2"><hr></td></tr>

            <tr ng-repeat="field in currentMethod.fields">
              <td valign="top" style="padding-top: 10px">{{ 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>
              </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#webhook{{ currentEvent.id ? '_' + currentEvent.id : '' }}"
                     target="_blank">
                    http://docs.quay.io/guides/notifications.html
                  </a>
                </div>
              </td>
            </tr>
          </table>
       </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 -->