Get the contacts field partially working

static/css/quay.css

@@ -4924,3 +4924,7 @@ i.slack-icon {
   vertical-align: middle;
   padding: 4px;
 }
+
+.config-contact-field .form-control {
+  width: 350px;
+}

static/directives/config/config-contact-field.html

@@ -0,0 +1,44 @@
+<div class="config-contact-field-element">
+  <table>
+  <tr>
+  <td>
+    <div class="dropdown">
+      <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
+        <span ng-switch="kind">
+          <span ng-switch-when="mailto"><i class="fa fa-envelope"></i></span>
+          <span ng-switch-when="irc"><i class="fa fa-comment"></i></span>
+          <span ng-switch-when="tel"><i class="fa fa-phone"></i></span>
+          <span ng-switch-default><i class="fa fa-ticket"></i></span>
+        </span>
+        <span class="caret"></span>
+      </button>
+      <ul class="dropdown-menu" role="menu">
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'mailto'">
+            <i class="fa fa-envelope"></i> E-mail
+          </a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'irc'">
+            <i class="fa fa-comment"></i> IRC
+          </a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'tel'">
+            <i class="fa fa-phone"></i> Telephone
+          </a>
+        </li>
+        <li role="presentation">
+          <a role="menuitem" tabindex="-1" href="javascript:void(0)" ng-click="kind = 'http'">
+            <i class="fa fa-ticket"></i> URL
+          </a>
+        </li>
+      </ul>
+    </div>
+  </td>
+  <td>
+    <input class="form-control" placeholder="{{ getPlaceholder(kind) }}" ng-model="value">
+  </td>
+  </tr>
+  </table>
+</div>

static/directives/config/config-contacts-field.html

@@ -0,0 +1,4 @@
+<div class="config-contacts-field-element">
+    <div class="config-contact-field" binding="item.value" ng-repeat="item in items">
+    </div>
+</div>

static/directives/config/config-setup-tool.html

@@ -24,22 +24,11 @@
           <tr>
             <td class="non-input">Contact Information:</td>
             <td colspan="2">
-              <span class="config-list-field" binding="config.CONTACT_INFO" item-title="Contact URL"
+              <span class="config-contacts-field" binding="config.CONTACT_INFO"></span>
-                    placeholder="Add contact information"></span>
               <div class="help-text" style="margin-top: 10px;">
                 Information to show in the Contact Page. If none specified, CoreOS contact information
                 is displayed.
               </div>
-
-              <div class="help-text">
-                <table class="inner-table">
-                  <tr><td><i class="fa fa-envelope"></i> E-mail</td><td>mailto:some@email.com</td></tr>
-                  <tr><td><i class="fa fa-comment"></i> IRC</td><td>irc://server:port/channel</td></tr>
-                  <tr><td><i class="fa fa-phone"></i> Telephone</td><td>tel:number</td></tr>
-                  <tr><td><i class="fa fa-twitter"></i> Twitter</td><td>https://twitter.com/twitterhandle</td></tr>
-                  <tr><td><i class="fa fa-ticket"></i> URL</td><td>http(s)://*</td></tr>
-                </table>
-              </div>
             </td>
           </tr>
           <tr>

static/js/core-config-setup.js

@@ -13,35 +13,6 @@ angular.module("core-config-setup", ['angularFileUpload'])
         $scope.config = null;
         $scope.mapped = {};
 
-        $scope.parseDbUri = function(value) {
-          if (!value) { return null; }
-
-          // Format: mysql+pymysql://<username>:<url escaped password>@<hostname>/<database_name>
-          var uri = URI(value);
-          return {
-            'kind': uri.protocol(),
-            'username': uri.username(),
-            'password': uri.password(),
-            'server': uri.hostname(),
-            'port': uri.port(),
-            'database': uri.path() ? uri.path().substr(1) : ''
-          };
-        };
-
-        $scope.serializeDbUri = function(fields) {
-          if (!fields['server']) { return '' };
-
-          var uri = URI();
-          uri = uri && uri.hostname(fields['server']);
-          uri = uri && uri.protocol(fields['kind']);
-          uri = uri && uri.username(fields['username']);
-          uri = uri && uri.password(fields['password']);
-          uri = uri && uri.port(fields['port']);
-          uri = uri && uri.path('/' + (fields['database'] || ''));
-          uri = uri && uri.toString();
-          return uri;
-        };
-
         var githubSelector = function(key) {
           return function(value) {
             if (!value || !$scope.config) { return; }
@@ -116,7 +87,6 @@ angular.module("core-config-setup", ['angularFileUpload'])
         $scope.$watch('mapped.redis.password', redisSetter('password'));
 
         $scope.$watch('config', function(value) {
-          window.console.log(value);
         }, true);
 
         $scope.$watch('isActive', function(value) {
@@ -394,6 +364,129 @@ angular.module("core-config-setup", ['angularFileUpload'])
     return directiveDefinitionObject;
   })
 
+  .directive('configContactsField', function () {
+    var directiveDefinitionObject = {
+      priority: 0,
+      templateUrl: '/static/directives/config/config-contacts-field.html',
+      priority: 1,
+      replace: false,
+      transclude: false,
+      restrict: 'C',
+      scope: {
+        'binding': '=binding'
+      },
+      controller: function($scope, $element) {
+        $scope.$watch('items', function(items) {
+          if (!items) { return; }
+
+          // Remove the last item if both it and the second to last items are empty.
+          if (items.length > 1 && !items[items.length - 2].value && !items[items.length - 1].value) {
+            items.splice(items.length - 1, 1);
+            return;
+          }
+
+          // If the last item is non-empty, add a new item.
+          if (items[items.length - 1].value) {
+            items.push({'value': ''});
+          }
+        }, true);
+
+        $scope.$watch('binding', function(binding) {
+          $scope.items = [];
+          $scope.items.push({'value': ''});
+        });
+      }
+    };
+    return directiveDefinitionObject;
+  })
+
+  .directive('configContactField', function () {
+    var directiveDefinitionObject = {
+      priority: 0,
+      templateUrl: '/static/directives/config/config-contact-field.html',
+      priority: 1,
+      replace: false,
+      transclude: true,
+      restrict: 'C',
+      scope: {
+        'binding': '=binding'
+      },
+      controller: function($scope, $element) {
+        $scope.kind = null;
+        $scope.value = null;
+
+        var updateBinding = function() {
+          var value = $scope.value || '';
+
+          switch ($scope.kind) {
+            case 'mailto':
+              $scope.binding = 'mailto:' + value;
+              return;
+
+            case 'tel':
+              $scope.binding = 'tel:' + value;
+              return;
+
+            case 'irc':
+              $scope.binding = 'irc://' + value;
+              return;
+
+            default:
+              $scope.binding = value;
+              return;
+          }
+        };
+
+        $scope.$watch('kind', updateBinding);
+        $scope.$watch('value', updateBinding);
+
+        $scope.$watch('binding', function(value) {
+          if (!value) {
+            $scope.kind = null;
+            $scope.value = null;
+            return;
+          }
+
+          var uri = URI(value);
+          $scope.kind = uri.scheme();
+
+          switch ($scope.kind) {
+            case 'mailto':
+            case 'tel':
+              $scope.value = uri.path();
+              break;
+
+            case 'irc':
+              $scope.value = value.substr('irc://'.length);
+              break;
+
+            default:
+              $scope.kind = 'http';
+              $scope.value = value;
+              break;
+          }
+        });
+
+        $scope.getPlaceholder = function(kind) {
+          switch (kind) {
+            case 'mailto':
+              return 'some@example.com';
+
+            case 'tel':
+              return '555-555-5555';
+
+            case 'irc':
+              return 'myserver:port/somechannel';
+
+            default:
+              return 'http://some/url';
+          }
+        };
+      }
+    };
+    return directiveDefinitionObject;
+  })
+
   .directive('configStringField', function () {
     var directiveDefinitionObject = {
       priority: 0,