Make the hip chat setup field show more help information if the user enters a room name instead of a number

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

@@ -81,9 +81,19 @@
                   </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>
-                  <input type="text" class="form-control" ng-model="currentConfig[field.name]"  ng-switch-when="regex" required
+                  <div ng-switch-when="regex">
-                         ng-pattern="getPattern(field)"
+                    <input type="text" class="form-control" ng-model="currentConfig[field.name]"
-                         placeholder="{{ field.placeholder }}">
+                           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]"
@@ -91,7 +101,8 @@
                        allowed-entities="['user', 'team', 'org']"
                        ng-switch-when="entity"></div>
 
-                  <div ng-if="getHelpUrl(field, currentConfig)" style="margin-top: 10px">
+                  <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>

static/js/directives/ng-name.js

@@ -0,0 +1,11 @@
+/**
+ * Adds an ng-name attribute which sets the name of a form field. Using the normal name field
+ * in Angular 1.3 works, but we're still on 1.2.
+ */
+angular.module('quay').directive('ngName', function () {
+  return function (scope, element, attr) {
+    scope.$watch(attr.ngName, function (name) {
+      element.attr('name', name);
+    });
+  };
+});

static/js/directives/ui/create-external-notification-dialog.js

@@ -38,6 +38,23 @@ angular.module('quay').directive('createExternalNotificationDialog', function ()
         $scope.unauthorizedEmail = false;
       };
 
+      $scope.hasRegexMismatch = function(err, fieldName) {
+        if (!err.pattern) {
+          return;
+        }
+
+        for (var i = 0; i < err.pattern.length; ++i) {
+          var current = err.pattern[i];
+          var value = current.$viewValue;
+          var elem = $element.find('#' + fieldName);
+          if (value == elem[0].value) {
+            return true;
+          }
+        }
+
+        return false;
+      };
+
       $scope.createNotification = function() {
         if (!$scope.currentConfig.email) {
           $scope.performCreateNotification();

static/js/services/external-notification-data.js

@@ -101,8 +101,11 @@ function(Config, Features) {
       'fields': [
         {
           'name': 'room_id',
-          'type': 'string',
+          'type': 'regex',
-          'title': 'Room ID #'
+          'title': 'Room ID #',
+          'regex': '^[0-9]+$',
+          'help_url': 'https://hipchat.com/admin/rooms',
+          'regex_fail_message': 'We require the HipChat room <b>number</b>, not name.'
         },
         {
           'name': 'notification_token',