Updates login screen with validation and messaging

src/Umbraco.Web.UI.Client/src/common/resources/auth.resource.js

@@ -3,13 +3,19 @@
     * @name umbraco.resources.authResource     
     * @description Loads in data for authentication
 **/
-function authResource($q, $http, umbRequestHelper) {
+function authResource($q, $http, umbRequestHelper, angularHelper) {
 
     return {
         //currentUser: currentUser,
 
         /** Logs the user in if the credentials are good */
         performLogin: function (username, password) {
+            
+            if (!username || !password) {
+                return angularHelper.rejectedPromise({
+                    errorMsg: 'Username or password cannot be empty'
+                });
+            }
 
             return umbRequestHelper.resourcePromise(
                 $http.post(

src/Umbraco.Web.UI.Client/src/common/services/util.service.js

@@ -31,6 +31,25 @@ angular.module('umbraco.services').factory('legacyJsLoader', legacyJsLoader);
 function angularHelper($log, $q) {
     return {
         
+        /**
+         * @ngdoc function
+         * @name umbraco.services.angularHelper#rejectedPromise
+         * @methodOf umbraco.services.angularHelper
+         * @function
+         *
+         * @description
+         * In some situations we need to return a promise as a rejection, normally based on invalid data. This
+         * is a wrapper to do that so we can save one writing a bit of code.
+         *
+         * @param {object} objReject The object to send back with the promise rejection
+         */
+        rejectedPromise: function (objReject) {
+            var deferred = $q.defer();
+            //return an error object including the error message for UI
+            deferred.reject(objReject);
+            return deferred.promise;
+        },
+
         /**
          * @ngdoc function
          * @name safeApply

src/Umbraco.Web.UI.Client/src/less/login.less

@@ -32,4 +32,13 @@
   color: @white;
   font-size: 18px;
   font-weight: normal
+}
+
+.login-overlay .alert.alert-error{
+    display: inline-block;
+    width: 270px;
+    padding-right: 6px;
+    padding-left: 6px;
+    margin-top: 10px;
+    text-align: center;
 }

src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.controller.js

@@ -11,10 +11,17 @@
      */
     var d = new Date();
     var weekday = new Array("Super Sunday", "Manic Monday", "Tremendous Tuesday", "Wonderfull Wednesday", "Thunder Thursday", "Friendly Friday", "Shiny Saturday");
+    
     $scope.today = weekday[d.getDay()];
 
-    $scope.loginClick = function (login, password) {
+    $scope.errorMsg = "";
+    
+    $scope.loginSubmit = function (login, password) {
         
+        if ($scope.loginForm.$invalid) {
+            return;
+        }
+
         userService.authenticate(login, password)
             .then(function (data) {
                 //We need to load in the legacy tree js.
@@ -23,7 +30,25 @@
                         $scope.submit(true);
                     });
             }, function (reason) {
-                alert(reason);
+                $scope.errorMsg = reason.errorMsg;
+                
+                //set the form inputs to invalid
+                $scope.loginForm.username.$setValidity("auth", false);
+                $scope.loginForm.password.$setValidity("auth", false);
             });
+        
+        //setup a watch for both of the model values changing, if they change
+        // while the form is invalid, then revalidate them so that the form can 
+        // be submitted again.
+        $scope.loginForm.username.$viewChangeListeners.push(function () {
+            if ($scope.loginForm.username.$invalid) {
+                $scope.loginForm.username.$setValidity('auth', true);
+            }
+        });
+        $scope.loginForm.password.$viewChangeListeners.push(function () {
+            if ($scope.loginForm.password.$invalid) {
+                $scope.loginForm.password.$setValidity('auth', true);
+            }
+        });
     };
 });

src/Umbraco.Web.UI.Client/src/views/common/dialogs/login.html

@@ -1,13 +1,19 @@
-<div id="login" class="umb-modalcolumn" ng-controller="Umbraco.Dialogs.LoginController">
-    <div class="form">
-        <h1>Happy {{today}}!, log in below</h1>
-        <div class="control-group">
-            <input type="text" ng-model="login" class="input-xlarge" placeholder="Enter your username" />
-        </div>
-        <div class="control-group">
-            <input type="password" ng-model="password" class="input-xlarge" placeholder="Enter your password" />
-        </div>
+<form name="loginForm" ng-submit="loginSubmit(login, password)" ng-controller="Umbraco.Dialogs.LoginController">
+    <div id="login" class="umb-modalcolumn" ng-class="{'show-validation': loginForm.$invalid}">
+        <div class="form">
+            <h1>Happy {{today}}!, log in below</h1>
+            <div class="control-group" ng-class="{error: loginForm.username.$invalid}">
+                <input type="text" ng-model="login" name="username" class="input-xlarge" placeholder="Enter your username" />
+            </div>
+            <div class="control-group" ng-class="{error: loginForm.password.$invalid}">
+                <input type="password" ng-model="password" name="password" class="input-xlarge" placeholder="Enter your password" />
+            </div>
 
-        <input type="button" ng-click="loginClick(login, password)" class="btn" value="Login" />
+            <input type="submit" class="btn" value="Login" ng-disabled="loginForm.$invalid" />
+            
+            <div class="control-group" ng-show="loginForm.$invalid">
+                <div class="alert alert-error">{{errorMsg}}</div>
+            </div>
+        </div>
     </div>
-</div>
+</form>

src/Umbraco.Web/Editors/AuthenticationController.cs

@@ -55,6 +55,7 @@ namespace Umbraco.Web.Editors
                 return _userModelMapper.ToUserDetail(user);
             }
 
+            //return Unauthorized (401) because the user is not authorized right now
             throw new HttpResponseException(HttpStatusCode.Unauthorized);
         }
 
@@ -67,7 +68,11 @@ namespace Umbraco.Web.Editors
                 UmbracoContext.Security.PerformLogin((int)user.Id);
                 return _userModelMapper.ToUserDetail(user);
             }
-            throw new HttpResponseException(HttpStatusCode.Unauthorized);
+
+            //return Forbidden (403), we don't want to return a 401 because that get's intercepted 
+            // by our angular helper because it thinks that we need to re-perform the request once we are
+            // authorized. A login form should not return a 401 because its the authorization process.
+            throw new HttpResponseException(HttpStatusCode.Forbidden);
         }
 
         //public HttpResponseMessage PostLogout()