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

Commit

Permalink
Bug 897600 Add firefox accounts screen to FTE flow r=arcturus,ferjm
Browse files Browse the repository at this point in the history
  • Loading branch information
@borjasalguero
borjasalguero authored and borjasalguero committed Mar 15, 2014
1 parent 56f8ff8 commit e5d3435
Show file tree
Hide file tree
Showing 16 changed files with 193 additions and 37 deletions.
Binary file added apps/communications/ftu/css/images/fxa_logo.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions apps/communications/ftu/css/style.css
View file
Expand Up @@ -1245,3 +1245,16 @@ html[dir="rtl"] [data-type="list"].pack-value-selector li label:not([for]) input
transform: translateX(700%);
}

.fxa-logo {
background-image: url('images/fxa_logo.png');
background-size: 100% auto;
margin: 0 auto;
width: 28rem;
height: 19.4rem;
}

#firefox_accounts {
padding: 1rem 1rem 0;
font-size: 1.5rem;
}

19 changes: 19 additions & 0 deletions apps/communications/ftu/index.html
View file
Expand Up @@ -67,6 +67,7 @@
<script defer type="text/javascript" src="/shared/js/mobile_operator.js"></script>
<script defer type="text/javascript" src="/shared/js/icc_helper.js"></script>
<script defer type="text/javascript" src="/shared/js/wifi_helper.js"></script>
<script defer type="text/javascript" src="/shared/js/fxa_iac_client.js"></script>
<script defer type="text/javascript" src="/ftu/js/sim_manager.js"></script>
<script defer type="text/javascript" src="/contacts/js/import_utils.js"></script>
<script defer type="text/javascript" src="/ftu/js/memcard_manager.js"></script>
Expand Down Expand Up @@ -421,6 +422,24 @@ <h2 data-l10n-id="otherAccount">Other accounts</h2>
</ul>
</article>
</section>

<section role="region" id="firefox_accounts">
<div class="fxa-logo"></div>

<p data-l10n-id="fxa-intro" id="fxa-intro">
Firefox lets you use a single account to log in
to services like <strong>Marketplace</strong>
and <strong>Where's My Fox</strong>.
</p>

<p>
<button id="fxa-create-account" data-l10n-id="fxa-create-account-or-sign-in">
Create Account or Sign In
</button>
</p>

</section>

<section role="region" id="about-your-rights">
<p data-l10n-id="about-your-rights-0">
Browser OS is built on free and open source software
Expand Down
41 changes: 34 additions & 7 deletions apps/communications/ftu/js/navigation.js
View file
Expand Up @@ -34,11 +34,17 @@ var steps = {
requireSIM: false
},
7: {
onlyForward: false,
hash: '#firefox_accounts',
requireSIM: false,
requireFxAEnabled: true
},
8: {
onlyForward: false,
hash: '#welcome_browser',
requireSIM: false
},
8: {
9: {
onlyForward: false,
hash: '#browser_privacy',
requireSIM: false
Expand All @@ -53,7 +59,8 @@ var _;
var Navigation = {
currentStep: 1,
previousStep: 1,

simMandatory: false,
fxaEnabled: false,
init: function n_init() {
_ = navigator.mozL10n.get;
var settings = navigator.mozSettings;
Expand All @@ -64,12 +71,21 @@ var Navigation = {
window.addEventListener('hashchange', this);
UIManager.activationScreen.addEventListener('click',
this.handleExternalLinksClick.bind(this));
this.simMandatory = false;

var req = settings && settings.createLock().get('ftu.sim.mandatory') || {};
var reqSIM =
settings && settings.createLock().get('ftu.sim.mandatory') || {};
var self = this;
req.onsuccess = function onSuccess() {
self.simMandatory = req.result['ftu.sim.mandatory'] || false;
reqSIM.onsuccess = function onSuccess() {
self.simMandatory = reqSIM.result['ftu.sim.mandatory'] || false;
};

var reqFxA =
settings &&
settings.createLock().get('identity.fxaccounts.ui.enabled') || {};
var self = this;
reqFxA.onsuccess = function onSuccess() {
self.fxaEnabled =
reqFxA.result['identity.fxaccounts.ui.enabled'] || false;
};
},

Expand Down Expand Up @@ -188,6 +204,9 @@ var Navigation = {
fbState = window.navigator.onLine ? 'enabled' : 'disabled';
ImportIntegration.checkImport(fbState);
break;
case '#firefox_accounts':
UIManager.mainTitle.innerHTML = _('firefox-accounts');
break;
case '#welcome_browser':
UIManager.mainTitle.innerHTML = _('aboutBrowser');
break;
Expand Down Expand Up @@ -255,13 +274,21 @@ var Navigation = {

// Retrieve future location
var futureLocation = steps[self.currentStep];

// Check required setting.
if (futureLocation.requireFxAEnabled &&
!this.fxaEnabled) {
self.skipStep();
return;
}

// There is some locations which need a 'loading'
if (futureLocation.hash === '#wifi') {
utils.overlay.show(_('scanningNetworks'), 'spinner');
}

// If SIMcard is mandatory and no SIM, go to message window
if (self.simMandatory &&
if (this.simMandatory &&
!IccHelper.cardState &&
futureLocation.requireSIM) {
//Send to SIM Mandatory message
Expand Down
44 changes: 43 additions & 1 deletion apps/communications/ftu/js/ui.js
View file
Expand Up @@ -3,7 +3,6 @@
var _;

var UIManager = {

// As in other Gaia apps, we store all the dom selectors in one
// place and then camelCase them and attach to the main object,
// eg. instead of calling document.getElementById('splash-screen')
Expand Down Expand Up @@ -62,6 +61,8 @@ var UIManager = {
'no-sim',
'sd-import-button',
'no-memorycard',
// Fxa Intro
'fxa-create-account',
// Wifi
'networks',
'wifi-refresh-button',
Expand Down Expand Up @@ -155,6 +156,8 @@ var UIManager = {

this.geolocationSwitch.addEventListener('click', this);

this.fxaCreateAccount.addEventListener('click', this);

// Prevent form submit in case something tries to send it
this.timeForm.addEventListener('submit', function(event) {
event.preventDefault();
Expand Down Expand Up @@ -362,6 +365,10 @@ var UIManager = {
case 'share-performance':
this.updateSetting(event.target.name, event.target.checked);
break;
// Fxa Intro
case 'fxa-create-account':
this.createFirefoxAccount();
break;
default:
// wifi selection
if (event.target.parentNode.id === 'networks-list') {
Expand All @@ -380,6 +387,41 @@ var UIManager = {
settings.createLock().set(cset);
},

createFirefoxAccount: function ui_createFirefoxAccount() {
var fxaDescription = document.getElementById('fxa-intro');
var showResponse = function ui_showResponse(response) {
if (response && response.done) {
// Update the email
UIManager.newsletterInput.value = response.email;
// Update the string
fxaDescription.innerHTML = '';
navigator.mozL10n.localize(
fxaDescription,
'fxa-logged',
{
email: response.email
}
);
// Disable the button
UIManager.fxaCreateAccount.disabled = true;
}
};
var showError = function ui_showError(response) {
console.error('Create FxA Error: ' + JSON.stringify(response));
// Clean fields
UIManager.newsletterInput.value = '';
// Reset the field
navigator.mozL10n.localize(
fxaDescription,
'fxa-intro'
);
// Enable the button
UIManager.fxaCreateAccount.disabled = false;
};

FxAccountsIACHelper.openFlow(showResponse, showError);
},

displayOfflineDialog: function ui_displayOfflineDialog(href, title) {
var dialog = this.offlineErrorDialog,
text = _('offline-dialog-text', { url: href });
Expand Down
7 changes: 7 additions & 0 deletions apps/communications/ftu/locales/ftu.en-US.properties
View file
Expand Up @@ -183,6 +183,13 @@ otherAccount = Other accounts
mobile = Mobile
afterFbImport = You can import and edit Facebook friends anytime in Contacts settings

#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
# Fxa Intro
#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
firefox-accounts = Firefox Accounts
fxa-intro.innerHTML = Firefox lets you use a single account to log in to services like <strong>Marketplace</strong> and <strong>Where's My Fox</strong>.
fxa-create-account-or-sign-in = Create Account or Sign In
fxa-logged = Now your email {{email}} have settled your account with Firefox Accounts! You can set your preferences through Settings App.
#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
# About your rights
#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#
Expand Down
63 changes: 47 additions & 16 deletions apps/communications/ftu/test/unit/navigation_test.js
View file
Expand Up @@ -25,21 +25,22 @@ requireApp('communications/ftu/test/unit/mock_navigation.html.js');
mocha.globals(['open']);

var _;
var mocksHelperForNavigation = new MocksHelper([
'utils',
'UIManager',
'SimManager',
'DataMobile',
'OperatorVariant',
'IccHelper',
'Tutorial',
'SdManager',
'ImportIntegration',
'WifiManager',
'WifiUI'
]).init();


suite('navigation >', function() {
var mocksHelperForNavigation = new MocksHelper([
'utils',
'UIManager',
'SimManager',
'DataMobile',
'OperatorVariant',
'IccHelper',
'Tutorial',
'SdManager',
'ImportIntegration',
'WifiManager',
'WifiUI'
]).init();
var mocksHelper = mocksHelperForNavigation;
var isOnLine = true;
var realOnLine,
Expand Down Expand Up @@ -78,6 +79,7 @@ suite('navigation >', function() {
MockIccHelper.setProperty('cardState', 'ready');

mocksHelper.suiteSetup();

Navigation.init();
});

Expand Down Expand Up @@ -106,7 +108,16 @@ suite('navigation >', function() {
Navigation.manageStep(callback);
};

teardown(function() {
Navigation.simMandatory = false;
Navigation.fxaEnabled = false;
});

test('navigates forward', function() {
MockIccHelper.setProperty('cardState', 'ready');
Navigation.simMandatory = true;
Navigation.fxaEnabled = true;

setStepState(1);
for (var i = Navigation.currentStep; i < numSteps; i++) {
Navigation.forward();
Expand All @@ -117,6 +128,8 @@ suite('navigation >', function() {
});

test('navigates backwards', function() {
Navigation.simMandatory = true;
Navigation.fxaEnabled = true;
setStepState(numSteps);
// The second step isn't mandatory.
for (var i = Navigation.currentStep; i > 2; i--) {
Expand All @@ -143,8 +156,14 @@ suite('navigation >', function() {
};

setup(function() {
MockIccHelper.setProperty('cardstate', 'ready');
MockIccHelper.setProperty('cardState', 'ready');
Navigation.simMandatory = false;
Navigation.fxaEnabled = true;
});

teardown(function() {
Navigation.simMandatory = false;
Navigation.fxaEnabled = false;
});

test('languages screen >', function(done) {
Expand Down Expand Up @@ -210,8 +229,18 @@ suite('navigation >', function() {
observer.observe(UIManager.mainTitle, observerConfig);
});

test('welcome screen >', function(done) {
test('firefox accounts screen >', function(done) {
setStepState(7);
var observer = new MutationObserver(function() {
observer.disconnect();
assert.equal(UIManager.mainTitle.innerHTML, _('firefox-accounts'));
done();
});
observer.observe(UIManager.mainTitle, observerConfig);
});

test('welcome screen >', function(done) {
setStepState(8);
var observer = new MutationObserver(function() {
observer.disconnect();
assert.equal(UIManager.mainTitle.innerHTML, _('aboutBrowser'));
Expand All @@ -221,7 +250,7 @@ suite('navigation >', function() {
});

test('privacy screen >', function(done) {
setStepState(8);
setStepState(9);
var observer = new MutationObserver(function() {
observer.disconnect();
assert.equal(UIManager.mainTitle.innerHTML, _('aboutBrowser'));
Expand Down Expand Up @@ -304,11 +333,13 @@ suite('navigation >', function() {

setup(function() {
Navigation.simMandatory = true;
Navigation.fxaEnabled = true;
setStepState(1);
});

teardown(function() {
Navigation.simMandatory = false;
Navigation.fxaEnabled = true;
});

test('without SIM card', function() {
Expand Down
5 changes: 2 additions & 3 deletions apps/communications/ftu/test/unit/ringtone_customizer_test.js
View file
Expand Up @@ -12,12 +12,11 @@ suite('RingtoneCustomizer >', function() {

suiteSetup(function() {
realSettings = navigator.mozSettings;
navigator.mozSettings = MockNavigatorSettings;
navigator.mozSettings = window.MockNavigatorSettings;
});

suiteTeardown(function() {
navigator.mozSettings = realSettings;
realSettings = null;
navigator.mozSettings.mTeardown();
});

test(' request the right ringtone blob > ', function() {
Expand Down
2 changes: 1 addition & 1 deletion apps/system/fxa/elements/fxa-email.html
View file
Expand Up @@ -5,7 +5,7 @@
<p class="keyboard-hide" data-l10n-id="fxa-use-email-to-sign-in">
Use your email address to create an account or sign in.
</p>
<input id="fxa-email-input" data-l10n-id="fxa-email-input" type="email" placeholder="Email" required="">
<input id="fxa-email-input" data-l10n-id="fxa-email-input" type="email" placeholder="Email" required="" x-inputmode="verbatim">
<p data-l10n-id="fxa-agree-to-tos-pp">
By proceeding, you agree to our <a class="disabled">Terms of Service</a> and <a class="disabled">Privacy Policy</a>.
</p>
Expand Down
4 changes: 2 additions & 2 deletions apps/system/fxa/elements/fxa-enter-password.html
View file
Expand Up @@ -3,8 +3,8 @@
<section class="vertical">
<h3 data-l10n-id="fxa-enter-password-title">Enter your password</h3>
<p id="fxa-hello-user" data-l10n-id="fxa-hello-user">Hello, <a id="fxa-user-email">holaENTER@email.com</a></p>
<input id="fxa-pw-input" type="password" placeholder="Password" required pattern=".{8,}" data-l10n-id="fxa-password">
<p class="forgot-password"><a id="fxa-forgot-password" data-l10n-id="fxa-forgot-password">I forgot my password</a></p>
<input id="fxa-pw-input" type="password" placeholder="Password" required pattern=".{8,}" data-l10n-id="fxa-password" x-inputmode="verbatim">
<p class="forgot-password"><a id="fxa-forgot-password" data-l10n-id="fxa-forgot-password" class="disabled">I forgot my password</a></p>

This comment has been minimized.

Sign in to view

Copy link
@jaredhirsch

jaredhirsch Mar 26, 2014

Contributor

hm, looks like this merge undid the fix for 972645, I'll open a followup to remove the .disabled

This comment has been minimized.

Sign in to view

Copy link
@jaredhirsch

jaredhirsch Mar 28, 2014

Contributor

followup bug is https://bugzilla.mozilla.org/show_bug.cgi?id=988589
<div class="horizontal">
<p data-l10n-id="fxa-show-password">Show password</p>
<label class="pack-checkbox" for="fxa-show-pw">
Expand Down

0 comments on commit e5d3435

Please sign in to comment.