V8: Accessibility changes for login screen

src/Umbraco.Web.UI.Client/src/common/directives/components/application/umblogin.directive.js

@@ -63,10 +63,14 @@
         vm.labels = {};
         localizationService.localizeMany([
             vm.usernameIsEmail ? "general_email" : "general_username", 
-            vm.usernameIsEmail ? "placeholders_email" : "placeholders_usernameHint"]
+            vm.usernameIsEmail ? "placeholders_email" : "placeholders_usernameHint",
+            vm.usernameIsEmail ? "placeholders_emptyEmail" : "placeholders_emptyUsername",
+            "placeholders_emptyPassword"]
         ).then(function (data) {
             vm.labels.usernameLabel = data[0];
             vm.labels.usernamePlaceholder = data[1];
+            vm.labels.usernameError = data[2];
+            vm.labels.passwordError = data[3];
         });
 
         vm.twoFactor = {};
@@ -193,72 +197,70 @@
         }
 
         function loginSubmit() {
-
-            // make sure that we are returning to the login view.
-            vm.view = "login";
-
-            // TODO: Do validation properly like in the invite password update
-
-            //if the login and password are not empty we need to automatically
-            // validate them - this is because if there are validation errors on the server
-            // then the user has to change both username & password to resubmit which isn't ideal,
-            // so if they're not empty, we'll just make sure to set them to valid.
-            if (vm.login && vm.password && vm.login.length > 0 && vm.password.length > 0) {
-                vm.loginForm.username.$setValidity('auth', true);
-                vm.loginForm.password.$setValidity('auth', true);
-            }
-
-            if (vm.loginForm.$invalid) {
-                SetTitle();
-                return;
-            }
-
-            vm.loginStates.submitButton = "busy";
-
-            userService.authenticate(vm.login, vm.password)
-                .then(function (data) {
-                    vm.loginStates.submitButton = "success";
-                    userService._retryRequestQueue(true);
-                    if(vm.onLogin) {
-                        vm.onLogin();
-                    }
-                },
-                function (reason) {
-
-                    //is Two Factor required?
-                    if (reason.status === 402) {
-                        vm.errorMsg = "Additional authentication required";
-                        show2FALoginDialog(reason.data.twoFactorView);
-                    }
-                    else {
-                        vm.loginStates.submitButton = "error";
-                        vm.errorMsg = reason.errorMsg;
-
-                        //set the form inputs to invalid
-                        vm.loginForm.username.$setValidity("auth", false);
-                        vm.loginForm.password.$setValidity("auth", false);
-                    }
-
-                    userService._retryRequestQueue();
-
-                });
-
-            //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.
-            vm.loginForm.username.$viewChangeListeners.push(function () {
-                if (vm.loginForm.$invalid) {
+
+            if (formHelper.submitForm({ scope: $scope })) {
+                //if the login and password are not empty we need to automatically
+                // validate them - this is because if there are validation errors on the server	
+                // then the user has to change both username & password to resubmit which isn't ideal,	            
+                // so if they're not empty, we'll just make sure to set them to valid.
+                if (vm.login && vm.password && vm.login.length > 0 && vm.password.length > 0) {	
                     vm.loginForm.username.$setValidity('auth', true);
                     vm.loginForm.password.$setValidity('auth', true);
                 }
-            });
-            vm.loginForm.password.$viewChangeListeners.push(function () {
+
                 if (vm.loginForm.$invalid) {
-                    vm.loginForm.username.$setValidity('auth', true);
-                    vm.loginForm.password.$setValidity('auth', true);
+                    SetTitle();
+                    return;
                 }
-            });
-            SetTitle();
+
+                // make sure that we are returning to the login view.
+                vm.view = "login";
+
+                vm.loginStates.submitButton = "busy";
+
+                userService.authenticate(vm.login, vm.password)
+                    .then(function(data) {
+                            vm.loginStates.submitButton = "success";
+                            userService._retryRequestQueue(true);
+                            if (vm.onLogin) {
+                                vm.onLogin();
+                            }
+                        },
+                        function(reason) {
+
+                            //is Two Factor required?
+                            if (reason.status === 402) {
+                                vm.errorMsg = "Additional authentication required";
+                                show2FALoginDialog(reason.data.twoFactorView);
+                            } else {
+                                vm.loginStates.submitButton = "error";
+                                vm.errorMsg = reason.errorMsg;
+
+                                //set the form inputs to invalid
+                                vm.loginForm.username.$setValidity("auth", false);
+                                vm.loginForm.password.$setValidity("auth", false);
+                            }
+
+                            userService._retryRequestQueue();
+
+                        });
+
+                //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.
+                vm.loginForm.username.$viewChangeListeners.push(function() {
+                    if (vm.loginForm.$invalid) {
+                        vm.loginForm.username.$setValidity('auth', true);
+                        vm.loginForm.password.$setValidity('auth', true);
+                    }
+                });
+                vm.loginForm.password.$viewChangeListeners.push(function() {
+                    if (vm.loginForm.$invalid) {
+                        vm.loginForm.username.$setValidity('auth', true);
+                        vm.loginForm.password.$setValidity('auth', true);
+                    }
+                });
+            }
         }
 
         function requestPasswordResetSubmit(email) {

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

@@ -123,6 +123,7 @@
     position: relative;    
     text-align: right;
     user-select: none;
+    margin-left: auto;
 
     a {
         opacity: .5;
@@ -134,8 +135,8 @@
         .password-text {
             background-repeat: no-repeat;
             background-size: 18px;
-            background-position: left center;            
-            padding-left: 26px;
+            background-position: 0px 1px;
+            padding-left: 24px;
 
             &.show {
                 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%23444' d='M16 6C9 6 3 10 0 16c3 6 9 10 16 10s13-4 16-10c-3-6-9-10-16-10zm8 5.3c1.8 1.2 3.4 2.8 4.6 4.7-1.2 2-2.8 3.5-4.7 4.7-3 1.5-6 2.3-8 2.3s-6-.8-8-2.3C6 19.5 4 18 3 16c1.5-2 3-3.5 5-4.7l.6-.2C8 12 8 13 8 14c0 4.5 3.5 8 8 8s8-3.5 8-8c0-1-.3-2-.6-2.6l.4.3zM16 13c0 1.7-1.3 3-3 3s-3-1.3-3-3 1.3-3 3-3 3 1.3 3 3z'/%3E%3C/svg%3E");

src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html

@@ -149,16 +149,16 @@ <h1>{{greeting}}</h1>
                     <form method="POST" name="vm.loginForm" ng-submit="vm.loginSubmit()">
 
                         <div ng-messages="vm.loginForm.$error" class="control-group" aria-live="assertive">
-                            <p ng-message="auth" class="text-error" role="alert">{{vm.errorMsg}}</p>
+                            <p ng-message="auth" class="text-error" role="alert" tabindex="0">{{vm.errorMsg}}</p>
                         </div>
                         <div class="control-group" ng-class="{error: vm.loginForm.username.$invalid}">
                             <label for="umb-username">{{vm.labels.usernameLabel}}</label>
-                            <input type="text" ng-model="vm.login" name="username" id="umb-username" class="-full-width-input" placeholder="{{vm.labels.usernamePlaceholder}}" focus-when="{{vm.view === 'login'}}" />
+                            <input type="text" ng-model="vm.login" name="username" id="umb-username" class="-full-width-input" placeholder="{{vm.labels.usernamePlaceholder}}" focus-when="{{vm.view === 'login'}}" aria-required="true"/>
                         </div>
 
                         <div class="control-group" ng-class="{error: vm.loginForm.password.$invalid}">
                             <label for="umb-passwordTwo"><localize key="general_password">Password</localize></label>
-                            <input type="password" ng-model="vm.password" name="password" id="umb-passwordTwo" class="-full-width-input" localize="placeholder" placeholder="@placeholders_password" />
+                            <input type="password" ng-model="vm.password" name="password" id="umb-passwordTwo" class="-full-width-input" localize="placeholder" placeholder="@placeholders_password" aria-required="true" />
                             <div class="password-toggle">
                                 <a href="#" prevent-default ng-click="vm.togglePassword()">
                                     <span class="password-text show"><localize key="login_showPassword">Show password</localize></span>