V8: Accessibility changes for login screen (#5800)
This commit is contained in:
Rachel Breeze
+63
-61
@@ -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 (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);
|
||||
}
|
||||
|
||||
if (vm.loginForm.$invalid) {
|
||||
SetTitle();
|
||||
return;
|
||||
}
|
||||
|
||||
// make sure that we are returning to the login view.
|
||||
vm.view = "login";
|
||||
|
||||
//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.loginStates.submitButton = "busy";
|
||||
|
||||
if (vm.loginForm.$invalid) {
|
||||
SetTitle();
|
||||
return;
|
||||
}
|
||||
userService.authenticate(vm.login, vm.password)
|
||||
.then(function(data) {
|
||||
vm.loginStates.submitButton = "success";
|
||||
userService._retryRequestQueue(true);
|
||||
if (vm.onLogin) {
|
||||
vm.onLogin();
|
||||
}
|
||||
},
|
||||
function(reason) {
|
||||
|
||||
vm.loginStates.submitButton = "busy";
|
||||
//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;
|
||||
|
||||
userService.authenticate(vm.login, vm.password)
|
||||
.then(function (data) {
|
||||
vm.loginStates.submitButton = "success";
|
||||
userService._retryRequestQueue(true);
|
||||
if(vm.onLogin) {
|
||||
vm.onLogin();
|
||||
//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);
|
||||
}
|
||||
},
|
||||
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);
|
||||
}
|
||||
});
|
||||
SetTitle();
|
||||
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) {
|
||||
|
||||
@@ -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");
|
||||
|
||||
@@ -149,16 +149,16 @@
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user