Skip to content

Commit

Permalink
V8: Accessibility changes for login screen (#5800)
Browse files Browse the repository at this point in the history
  • Loading branch information
@RachBreeze
RachBreeze authored May 26, 2020
1 parent e260410 commit 6da69f1
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 67 deletions.
126 changes: 64 additions & 62 deletions src/Umbraco.Web.UI.Client/src/common/directives/components/application/umblogin.directive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {};
Expand Down Expand Up @@ -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) {
Expand Down
5 changes: 3 additions & 2 deletions src/Umbraco.Web.UI.Client/src/less/pages/login.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@
position: relative;
text-align: right;
user-select: none;
margin-left: auto;

a {
opacity: .5;
Expand All @@ -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");
Expand Down
6 changes: 3 additions & 3 deletions src/Umbraco.Web.UI.Client/src/views/components/application/umb-login.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 6da69f1

Please sign in to comment.