Allow a user to register from the landing page. Fix spacing issues.

endpoints/api.py

@@ -6,6 +6,7 @@ from functools import wraps
 
 from data import model
 from app import app
+from util.email import send_confirmation_email
 from util.names import parse_repository_name
 from util.gravatar import compute_hash
 from auth.permissions import (ReadRepositoryPermission,
@@ -36,7 +37,7 @@ def welcome():
   return make_response('welcome', 200)
 
 
-@app.route('/api/user/')
+@app.route('/api/user/', methods=['GET'])
 def get_logged_in_user():
   if current_user.is_anonymous():
     return jsonify({'anonymous': True})
@@ -51,6 +52,23 @@ def get_logged_in_user():
   })
 
 
+@app.route('/api/user/', methods=['POST'])
+def create_user_api():
+  user_data = request.get_json()
+  try:
+    new_user = model.create_user(user_data['username'], user_data['password'],
+                                 user_data['email'])
+    code = model.create_confirm_email_code(new_user)
+    send_confirmation_email(new_user.username, new_user.email, code.code)
+    return make_response('Created', 201)
+  except model.DataModelException as ex:
+    error_resp = jsonify({
+      'message': ex.message,
+    })
+    error_resp.status_code = 400
+    return error_resp
+
+
 @app.route('/api/users/<prefix>', methods=['GET'])
 @api_login_required
 def get_matching_users(prefix):

static/css/quay.css

@@ -36,6 +36,18 @@
   margin-left: 0px;
 }
 
+.form-signup input.ng-invalid.ng-dirty {
+  background-color: #FDD7D9;
+}
+
+.form-signup input.ng-valid.ng-dirty {
+  background-color: #DDFFEE;
+}
+
+.landing .popover-content {
+  color: black;
+}
+
 .landing .message {
   font-size: 3.4em;
   margin-bottom: 10px;

static/js/app.js

@@ -54,6 +54,18 @@ quayApp = angular.module('quay', ['restangular', 'angularMoment'], function($pro
       return userService;
     }])
   }).
+  directive('match', function($parse) {
+    return {
+      require: 'ngModel',
+      link: function(scope, elem, attrs, ctrl) {
+        scope.$watch(function() {        
+          return $parse(attrs.match)(scope) === ctrl.$modelValue;
+        }, function(currentValue) {
+          ctrl.$setValidity('mismatch', currentValue);
+        });
+      }
+    };
+  }).
   config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
     $routeProvider.
       when('/repository/:namespace/:name', {templateUrl: '/static/partials/view-repo.html', controller: RepoCtrl}).

static/js/controllers.js

@@ -98,8 +98,26 @@ function RepoListCtrl($scope, Restangular) {
   });
 }
 
-function LandingCtrl($scope) {
+function LandingCtrl($scope, $timeout, Restangular, UserService) {
+  $('.form-signup').popover();
 
+  $scope.$watch( function () { return UserService.currentUser(); }, function (currentUser) {
+    $scope.user = currentUser;
+  }, true);
+
+  $scope.awaitingConfirmation = false;
+  $scope.register = function() {
+    var newUserPost = Restangular.one('user/');
+    newUserPost.customPOST($scope.newUser).then(function() {
+      $scope.awaitingConfirmation = true;
+    }, function(result) {
+      console.log("Displaying error message.");
+      $scope.registerError = result.data.message;
+      $timeout(function() {
+        $('.form-signup').popover('show');
+      });
+    });
+  };
 }
 
 function RepoCtrl($scope, Restangular, $routeParams, $rootScope) {
@@ -224,7 +242,6 @@ function RepoAdminCtrl($scope, Restangular, $routeParams, $rootScope) {
       template += '</div>'
       return template;
     },
-
   });
 
   $('#userSearch').on('typeahead:selected', function(e, datum) {

static/partials/landing.html

@@ -8,12 +8,21 @@
   </div>
 
   <div class="signup-container">
-    <form method="post" class="form-signup">
+    <div ng-show="user.anonymous">
-      <input type="text" class="form-control" placeholder="Create a username" name="username" autofocus>
+      <form class="form-signup" name="signupForm" ng-submit="register()" data-trigger="manual" data-content="{{ registerError }}" data-placement="left" ng-show="!awaitingConfirmation">
-      <input type="text" class="form-control" placeholder="Email address" name="email">
+        <input type="text" class="form-control" placeholder="Create a username" name="username" ng-model="newUser.username" autofocus required>
-      <input type="password" class="form-control" placeholder="Create a password" name="password">
+        <input type="email" class="form-control" placeholder="Email address" ng-model="newUser.email" required>
-      <button class="btn btn-lg btn-primary btn-block" type="submit">Get Started!</button>
+        <input type="password" class="form-control" placeholder="Create a password" ng-model="newUser.password" required>
+        <input type="password" class="form-control" placeholder="Verify your password" ng-model="newUser.repeatePassword" match="newUser.password" required>
+        <button class="btn btn-lg btn-primary btn-block" ng-disabled="signupForm.$invalid" type="submit">Get Started!</button>
       </form>
+      <div ng-show="awaitingConfirmation">
+        <div class="sub-message">Thank you for registering! We have sent you an activation email. You must <b>verify your email address</b> before you can continue.</div>
+      </div>
+    </div>
+    <div ng-show="!user.anonymous">
+      <div class="sub-message">Some message about how awesome it is to be a Quay user goes here.</div>
+    </div>
   </div>
 
   <div class="shoutouts">