Skip to content
This repository has been archived by the owner on Nov 3, 2021. It is now read-only.

Commit

Permalink
Merge pull request #33374 from begeeben/1221439_missing_the_x
Browse files Browse the repository at this point in the history 
Bug 1221439 - [TV Browser] Missing the "x" button to clean the password in Firefox Account - Sign In page, r=sean lee
  • Loading branch information
@begeeben
begeeben committed Nov 27, 2015
2 parents 6a8f8a0 + 78cb550 commit c852308
Show file tree
Hide file tree
Showing 5 changed files with 61 additions and 15 deletions.
5 changes: 4 additions & 1 deletion tv_apps/smart-system/fxa/elements/fxa-enter-password.html
View file
Expand Up @@ -3,7 +3,10 @@
<section class="vertical">
<h3 class="fxa-title" data-l10n-id="firefox-accounts-title"></h3>
<p id="fxa-hello-known-user" class="fxa-intro">Hello, <a id="fxa-known-user-email">holaENTER@email.com</a></p>
<input id="fxa-pw-input" type="password" placeholder="Password" required pattern=".{8,}" data-l10n-id="fxa-password" x-inputmode="verbatim" tabindex="-1">
<div id="fxa-pw-input-wrapper">
<input id="fxa-pw-input" type="password" placeholder="Password" required pattern=".{8,}" data-l10n-id="fxa-password" x-inputmode="verbatim" tabindex="-1">
<button id="fxa-pw-clean-btn" data-icon="close" aria-hidden="true" tabindex="-1"></button>
</div>
<div id="fxa-pw-option-container">
<p class="fine-print"><a id="fxa-forgot-password" data-l10n-id="fxa-forgot-your-password" tabindex="-1">Forgot your password?</a></p>
<div id="show-pw-wrapper">
Expand Down
5 changes: 4 additions & 1 deletion tv_apps/smart-system/fxa/elements/fxa-refresh-auth.html
View file
Expand Up @@ -3,7 +3,10 @@
<section class="vertical">
<h3 class="fxa-title"><span data-l10n-id="firefox-accounts-title"></span><span class="fax-title-separator">|</span><span data-l10n-id="fxa-signin"></span></h3>
<p id="fxa-password-refresh" class="fxa-intro" data-l10n-id="fxa-password-refresh">Please enter your Firefox Account password to continue.</p>
<input id="fxa-pw-input-refresh" type="password" placeholder="Password" required="" pattern=".{8,}" data-l10n-id="fxa-password" tabindex="-1">
<div id="fxa-pw-input-wrapper">
<input id="fxa-pw-input-refresh" type="password" placeholder="Password" required="" pattern=".{8,}" data-l10n-id="fxa-password" tabindex="-1">
<button id="fxa-pw-clean-btn" data-icon="close" aria-hidden="true" tabindex="-1"></button>
</div>
<div id="fxa-pw-option-container">
<p class="fine-print"><a id="fxa-forgot-password-refresh" data-l10n-id="fxa-forgot-your-password" tabindex="-1">Forgot your password?</a></p>
<div id="show-pw-wrapper">
Expand Down
26 changes: 21 additions & 5 deletions tv_apps/smart-system/fxa/js/screens/fxam_enter_password.js
View file
Expand Up @@ -79,14 +79,20 @@ var FxaModuleEnterPassword = (function() {
'fxa-hello-known-user',
'fxa-pw-input',
'fxa-show-pw',
'fxa-forgot-password'
'fxa-forgot-password',
'fxa-pw-clean-btn'
);
// Add listeners
this.fxaPwInput.addEventListener(
'input',
function onInput(event) {
if(this.fxaPwInput.value) {
this.fxaPwCleanBtn.classList.add('show');
} else {
this.fxaPwCleanBtn.classList.remove('show');
}
_enableNext(event.target);
}
}.bind(this)
);
// Ensure that pressing 'ENTER' (keycode 13) we send the form
// as expected
Expand All @@ -104,6 +110,16 @@ var FxaModuleEnterPassword = (function() {
setTimeout(this.fxaPwInput.select.bind(this.fxaPwInput));
});

this.fxaPwCleanBtn.addEventListener(
'click',
function onCleanButtonClick(e) {
if(e.button === 0 ||
(e.keyCode && e.keyCode === KeyEvent.DOM_VK_RETURN)) {
this.fxaPwInput.value = '';
}
}.bind(this)
);

this.fxaShowPw.addEventListener('keypress', e => {
if (e.keyCode && e.keyCode === KeyEvent.DOM_VK_RETURN) {
this.fxaShowPw.checked = !this.fxaShowPw.checked;
Expand Down Expand Up @@ -166,14 +182,14 @@ var FxaModuleEnterPassword = (function() {
setTimeout(() => {
FxaModuleKeyNavigation.add([
'#fxa-pw-input', '#fxa-forgot-password',
'#fxa-show-pw', '#fxa-module-done']);
'#fxa-show-pw', '#fxa-module-done', '#fxa-pw-clean-btn']);
}, 500);
};

Module.onBack = function onBack() {
FxaModuleKeyNavigation.remove([
'#fxa-pw-input', '#fxa-forgot-password',
'#fxa-show-pw', '#fxa-module-done']);
'#fxa-show-pw', '#fxa-module-done', '#fxa-pw-clean-btn']);
};

Module.onDone = function onDone(done) {
Expand All @@ -187,7 +203,7 @@ var FxaModuleEnterPassword = (function() {
FxaModuleOverlay.hide();
FxaModuleKeyNavigation.remove([
'#fxa-pw-input', '#fxa-forgot-password',
'#fxa-show-pw', '#fxa-module-done']);
'#fxa-show-pw', '#fxa-module-done', '#fxa-pw-clean-btn']);

if (!response.authenticated) {
// XXX For now, because we don't allow the creation of new accounts
Expand Down
24 changes: 21 additions & 3 deletions tv_apps/smart-system/fxa/js/screens/fxam_refresh_auth.js
View file
Expand Up @@ -84,13 +84,29 @@ var FxaModuleRefreshAuth = (function() {
this.importElements(
'fxa-pw-input-refresh',
'fxa-show-pw-refresh',
'fxa-forgot-password-refresh'
'fxa-forgot-password-refresh',
'fxa-pw-clean-btn'
);

this.fxaPwInputRefresh.addEventListener('input', (function(event) {
if(this.fxaPwInput.value) {
this.fxaPwCleanBtn.classList.add('show');
} else {
this.fxaPwCleanBtn.classList.remove('show');
}
_enableDone(event.target);
}).bind(this));

this.fxaPwCleanBtn.addEventListener(
'click',
function onCleanButtonClick(e) {
if(e.button === 0 ||
(e.keyCode && e.keyCode === KeyEvent.DOM_VK_RETURN)) {
this.fxaPwInput.value = '';
}
}.bind(this)
);

this.fxaShowPwRefresh.addEventListener('change', (function() {
var passwordFieldType = !!this.fxaShowPwRefresh.checked ? 'text' :
'password';
Expand Down Expand Up @@ -150,7 +166,8 @@ var FxaModuleRefreshAuth = (function() {
setTimeout(() => {
FxaModuleKeyNavigation.add([
'#fxa-pw-input-refresh', '#fxa-show-pw-refresh',
'#fxa-forgot-password-refresh', '#fxa-module-done']);
'#fxa-forgot-password-refresh', '#fxa-module-done',
'#fxa-pw-clean-btn']);
}, 500);
};

Expand All @@ -164,7 +181,8 @@ var FxaModuleRefreshAuth = (function() {
FxaModuleOverlay.hide();
FxaModuleKeyNavigation.remove([
'#fxa-pw-input-refresh', '#fxa-show-pw-refresh',
'#fxa-forgot-password-refresh', '#fxa-module-done']);
'#fxa-forgot-password-refresh', '#fxa-module-done',
'#fxa-pw-clean-btn']);
callback();
}, function onError(response) {
FxaModuleKeyNavigation.disable();
Expand Down
16 changes: 11 additions & 5 deletions tv_apps/smart-system/fxa/style/fxa.css
View file
Expand Up @@ -284,7 +284,8 @@ gaia-header {
height: 80rem;
}

#fxa-email-input-wrapper {
#fxa-email-input-wrapper,
#fxa-pw-input-wrapper {
position: relative;
}

Expand All @@ -295,7 +296,8 @@ gaia-header {
margin-bottom: 4.5rem;
}

#fxa-email-clean-btn {
#fxa-email-clean-btn,
#fxa-pw-clean-btn {
position: absolute;
top: 1.4rem;
right: 5em;
Expand All @@ -312,18 +314,22 @@ gaia-header {
}

#fxa-email-clean-btn:focus,
#fxa-email-clean-btn:hover {
#fxa-email-clean-btn:hover,
#fxa-pw-clean-btn:focus,
#fxa-pw-clean-btn:hover {
transform: scale(1.2);
background-color: #fff;
color: black;
/*transform-origin: 50% 50%;*/
}

#fxa-email-clean-btn.show {
#fxa-email-clean-btn.show,
#fxa-pw-clean-btn.show {
display: block;
}

#fxa-email-clean-btn:before {
#fxa-email-clean-btn:before,
#fxa-pw-clean-btn:before {
offset-inline-end: 0;
}

Expand Down

0 comments on commit c852308

Please sign in to comment.