Merge pull request #1852 from coreos-inc/underscore_orgs

Better handling of namespace validation to fix a number of issues

static/css/core-ui.css

@@ -1487,6 +1487,12 @@ a:focus {
   font-size: 18px;
 }
 
+.co-alert.thin:after {
+  top: 9px;
+  font-size: 13px;
+  left: 19px;
+}
+
 .co-alert-popin-warning {
   margin-left: 10px;
 }

static/css/directives/ui/user-setup.css

@@ -94,4 +94,16 @@
 
 .user-setup-element .user-footer-links a:last-child:after {
     content: "";
+}
+
+.user-setup-element .expandable {
+    height: 0px;
+    transition: height ease-in-out 250ms;
+    margin-top: 16px;
+    margin-bottom: 10px;
+    overflow: hidden;
+}
+
+.user-setup-element .expandable.expanded {
+    height: 60px;
 }

static/directives/namespace-input.html

@@ -0,0 +1,5 @@
+<span class="namespace-input-element">
+  <input type="text" class="form-control" placeholder="{{ namespaceTitle }}" ng-model="binding"
+         required autofocus ng-pattern="usernamePattern"
+         name="namespaceField">
+</span>

static/directives/signup-form.html

@@ -9,7 +9,16 @@
 
   <form class="form-signup" name="signupForm" ng-submit="register()" ng-show="!awaitingConfirmation && !registering">
     <label for="username">Username:</label>
-    <input type="text" class="form-control" placeholder="Requested username" name="username" ng-model="newUser.username" autofocus required ng-pattern="/^[a-z0-9_]{4,30}$/">
+    <span class="namespace-input" binding="newUser.username" is-back-incompat="isBackIncompat" namespace-title="Requested username"></span>
+
+    <div class="expandable" ng-class="{'expanded': isBackIncompat || (!signupForm.namespaceField.$error.required && signupForm.namespaceField.$invalid)}">
+      <div class="co-alert co-alert-warning thin" ng-show="isBackIncompat">
+        Usernames with dots or dashes are incompatible with Docker verion 1.8 or older
+      </div>
+      <div class="co-alert co-alert-danger thin" ng-show="!signupForm.namespaceField.$error.required && signupForm.namespaceField.$invalid">
+        Usernames must be alphanumeric and be at least four characters in length
+      </div>
+    </div>
 
     <label for="email">E-mail address:</label>
     <input type="email" class="form-control" placeholder="Your email address" name="email" ng-model="newUser.email" required>
@@ -20,6 +29,8 @@
     <input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatPassword"
            match="newUser.password" required
            ng-pattern="/^.{8,}$/">
+
+
     <button id="signupButton"
             class="btn btn-primary btn-block landing-signup-button" ng-disabled="signupForm.$invalid" type="submit"
             analytics-on analytics-event="register">

static/js/app.js

@@ -1,6 +1,6 @@
 var TEAM_PATTERN = '^[a-z][a-z0-9]+$';
 var ROBOT_PATTERN = '^[a-z][a-z0-9_]{3,29}$';
-var USER_PATTERN = '^[a-z0-9_]{4,30}$';
+var USERNAME_PATTERN = '^([a-z0-9]+(?:[._-][a-z0-9]+)*){4,30}$';
 
 // Define the pages module.
 quayPages = angular.module('quayPages', [], function(){});

static/js/directives/ui/namespace-input.js

@@ -0,0 +1,32 @@
+/**
+ * An element which displays an input box for creating a namespace.
+ */
+angular.module('quay').directive('namespaceInput', function () {
+  var directiveDefinitionObject = {
+    priority: 0,
+    templateUrl: '/static/directives/namespace-input.html',
+    replace: false,
+    transclude: true,
+    restrict: 'C',
+    scope: {
+      'binding': '=binding',
+      'isBackIncompat': '=isBackIncompat',
+      'namespaceTitle': '@namespaceTitle',
+    },
+    controller: function($scope, $element) {
+      $scope.USERNAME_PATTERN = USERNAME_PATTERN;
+      $scope.usernamePattern = new RegExp(USERNAME_PATTERN);
+
+
+      $scope.$watch('binding', function(binding) {
+        if (!binding) {
+          $scope.isBackIncompat = false;
+          return;
+        }
+
+        $scope.isBackIncompat = (binding.indexOf('-') > 0 || binding.indexOf('.') > 0);
+      })
+    }
+  };
+  return directiveDefinitionObject;
+});

static/js/pages/new-organization.js

@@ -54,9 +54,9 @@
     };
 
     $scope.createNewOrg = function() {
-      $('#orgName').popover('hide');
-
+      $scope.createError = null;
       $scope.creating = true;
+
       var org = $scope.org;
       var data = {
         'name': org.name,
@@ -96,9 +96,6 @@
       }, function(resp) {
         $scope.creating = false;
         $scope.createError = ApiService.getErrorMessage(resp);
-        $timeout(function() {
-          $('#orgName').popover('show');
-        });
       });
     };
   }

static/partials/new-organization.html

@@ -33,19 +33,22 @@
         <!-- Step 2 -->
         <div ng-show="user && !user.anonymous && !created">
           <div class="step-container">
+            <div class="co-alert co-alert-danger" ng-if="createError">
+            {{ createError }}
+            </div>
+
             <form method="post" name="newOrgForm" id="newOrgForm" ng-submit="createNewOrg()">
               <div class="form-group nested">
                 <label for="orgName">Organization Name</label>
                 <div class="field-row">
                   <span class="field-container">
-                    <input id="orgName" name="orgName" type="text" class="form-control"
-                           placeholder="Organization Name"
-                           ng-model="org.name" required autofocus data-trigger="manual"
-                           data-content="{{ createError }}"
-                           data-placement="bottom" data-container="body" ng-pattern="/^[a-z0-9_]{4,30}$/">
+                    <span class="namespace-input" binding="org.name" is-back-incompat="isBackIncompat" namespace-title="Organization name"></span>
                   </span>
-                  <span class="co-alert co-alert-warning thin" ng-show="!newOrgForm.orgName.$error.required && !newOrgForm.orgName.$valid">
-                      Organization names must match [a-z0-9_]+ and be at least four characters in length.
+                  <span class="co-alert co-alert-warning thin" ng-show="isBackIncompat">
+                    Organization names with dots or dashes are incompatible with Docker verion 1.8 or older
+                  </span>
+                  <span class="co-alert co-alert-danger thin" ng-show="!newOrgForm.namespaceField.$error.required && newOrgForm.namespaceField.$invalid">
+                    Organization names must be alphanumeric and be at least four characters in length
                   </span>
                 </div>
                 <span class="description">This will also be the namespace for your repositories. Must be alphanumeric, all lowercase and at least four characters long.</span>