This repository has been archived by the owner on Nov 3, 2021. It is now read-only.
Bug 929388 - Incorporate a FxA Manager and FxA Client into the System app r=alive, ferjm, arcturus #14101
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| <element name="fxa-email" extends="section"> | ||
| <template> | ||
| <section class="vertical"> | ||
| <div class="fxa-logo"></div> | ||
| <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=""> | ||
| <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> | ||
| </section> | ||
| <script src='js/screens/fxam_enter_email.js'></script> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| <element name="fxa-enter-password" extends="section"> | ||
| <template> | ||
| <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" class="disabled">I forgot my password</a></p> | ||
| <div class="horizontal"> | ||
| <p data-l10n-id="fxa-show-password">Show password</p> | ||
| <label class="pack-checkbox" for="fxa-show-pw"> | ||
| <input id="fxa-show-pw" type="checkbox"> | ||
| <span></span> | ||
| </label> | ||
| </div> | ||
| <div class="fxa-logo small"></div> | ||
| <script src='js/screens/fxam_enter_password.js'></script> | ||
| </section> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| <element name="fxa-error-overlay" extends="form"> | ||
| <template> | ||
| <section> | ||
| <h1 id="fxa-error-title">Error message</h1> | ||
| <p><small id="fxa-error-msg">Error message.</small></p> | ||
| <menu> | ||
| <button class="full" data-l10n-id="fxa-ok" id="fxa-error-ok">OK</button> | ||
| </menu> | ||
| </section> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| <element name="fxa-password-reset-success" extends="section"> | ||
| <template> | ||
| <section class="vertical"> | ||
| <h3 data-l10n-id="fxa-password-reset-success"> | ||
| Reset Your Password | ||
| </h3> | ||
|
|
||
| <p data-l10n-id="fxa-sent-email-to" class="fxa-envelope"> | ||
| We've sent an email to: <strong id="fxa-summary-email">email</strong> | ||
| </p> | ||
|
|
||
| <p data-l10n-id="fxa-password-reset-click-link-in-email"> | ||
| Next time you check your email, you'll be able to reset your Firefox Account password. | ||
| </p> | ||
| <p data-l10n-id="fxa-edit-fxa-preferences"> | ||
| In the future, you can edit your Firefox Account preferences from your phone's settings. | ||
| </p> | ||
|
|
||
| <script src='js/screens/fxam_password_reset_success.js'></script> | ||
| </section> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <element name="fxa-pp" extends="section"> | ||
| <template> | ||
| <section role="region"> | ||
| <h3 data-l10n-id="fxa-pp-header">Privacy Policy</h3> | ||
| <p data-l10n-id="fxa-pp1"> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequ at. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | ||
| </p> | ||
| <p data-l10n-id="fxa-pp2"> | ||
| Excepteur sint occaecat qui of fi cia deserunt mollit anim id est lab orum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. D uis aute irure dolor in. | ||
| </p> | ||
| </section> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| <element name="fxa-set-password" extends="section"> | ||
| <template> | ||
| <section class="vertical"> | ||
| <h3 data-l10n-id="fxa-set-password-title">Enter your new password</h3> | ||
| <p id="fxa-hello-user" data-l10n-id="fxa-hello-user">Hello, <a id="fxa-user-set-email">holaSET@email.com</a></p> | ||
| <input id="fxa-pw-set-input" type="password" placeholder="Password" required="" pattern=".{8,}" data-l10n-id="fxa-password"> | ||
| <div class="horizontal"> | ||
| <p data-l10n-id="fxa-show-password">Show password</p> | ||
| <label class="pack-checkbox" for="fxa-show-pw-set"> | ||
| <input id="fxa-show-pw-set" type="checkbox"> | ||
| <span></span> | ||
| </label> | ||
| </div> | ||
| <div class="fxa-logo small"></div> | ||
| <script src='js/screens/fxam_set_password.js'></script> | ||
| </section> | ||
| </template> | ||
| </element> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <element name="fxa-signin-success" extends="section"> | ||
| <template> | ||
| <section class="vertical"> | ||
| <h3 data-l10n-id="fxa-success"> | ||
| Success! | ||
| </h3> | ||
| <p data-l10n-id="fxa-ready-to-go"> | ||
| Your Firefox Account is ready to go! | ||
| </p> | ||
| <p data-l10n-id="fxa-use-services"> | ||
| Now you can use <span id="fxa-summary-email">email</span> to access services like Marketplace and Where’s My Fox. | ||
| </p> | ||
| <p data-l10n-id="fxa-manage-account-settings"> | ||
| In the future, you can access and manage your account from your phone's settings. | ||
| </p> | ||
| <div class="fxa-logo small"></div> | ||
| <script src='js/screens/fxam_signin_success.js'></script> | ||
| </section> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <element name="fxa-signup-success" extends="section"> | ||
|
There was a problem hiding this comment. Why do we have another success page? The html structure look the same to me, and I'm not worried about performance as I read above, won't block on this, but I consider that we are creating too many document elements for same purposes. There was a problem hiding this comment. Currently the HTML is quite similar, but it will change. Instead of loading a 'generic' success page, and add logic to show/hide elements, we have decided to keep it simple and load only what we need instead. |
||
| <template> | ||
| <section class="vertical"> | ||
| <h3 data-l10n-id="fxa-confirm-account"> | ||
| Confirm Your Account | ||
| </h3> | ||
| <p data-l10n-id="fxa-sending-email-to" class="fxa-envelope"> | ||
| We have sent an email to: <strong id="fxa-summary-email">email</strong> | ||
| </p> | ||
| <p data-l10n-id="fxa-signup-click-link-in-email"> | ||
| Next time you check your email, click the verification link to confirm your Firefox account. | ||
| </p> | ||
| <p data-l10n-id="fxa-manage-account-settings"> | ||
| In the future, you can access and manage your account from your phone's settings. | ||
| </p> | ||
| <div class="fxa-logo small"></div> | ||
| <script src='js/screens/fxam_signup_success.js'></script> | ||
| </section> | ||
| </template> | ||
| </element> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <element name="fxa-tos" extends="section"> | ||
| <template> | ||
| <section role="region"> | ||
| <h3 data-l10n-id="fxa-tos-header">Terms of Service</h3> | ||
| <p data-l10n-id="fxa-tos1"> | ||
| Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eius mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequ at. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. | ||
| </p> | ||
| <p data-l10n-id="fxa-tos2"> | ||
| Excepteur sint occaecat qui of fi cia deserunt mollit anim id est lab orum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. D uis aute irure dolor in. | ||
| </p> | ||
| </section> | ||
| </template> | ||
| </element> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <link href="../shared/style/headers.css" rel="stylesheet" type="text/css"> | ||
| <link href="../shared/style/switches.css" rel="stylesheet" type="text/css"> | ||
| <link href="../shared/style/buttons.css" rel="stylesheet" type="text/css"> | ||
| <link href="../shared/style/confirm.css" rel="stylesheet" type="text/css"> | ||
| <link href="../shared/style/input_areas.css" rel="stylesheet" type="text/css"> | ||
| <link href="../shared/style_unstable/progress_activity.css" rel="stylesheet" type="text/css"> | ||
| <link href="style/fxa.css" rel="stylesheet" type="text/css"> | ||
|
|
||
| <link rel="resource" type="application/l10n" href="locales/locales-fxa.ini" /> | ||
|
|
||
| <link rel="import" href="elements/fxa-intro.html"> | ||
| <link rel="import" href="elements/fxa-email.html"> | ||
|
|
||
| <link rel="import" href="elements/fxa-set-password.html"> | ||
| <link rel="import" href="elements/fxa-signup-success.html"> | ||
|
|
||
| <link rel="import" href="elements/fxa-enter-password.html"> | ||
| <link rel="import" href="elements/fxa-signin-success.html"> | ||
| <link rel="import" href="elements/fxa-password-reset-success.html"> | ||
| <link rel="import" href="elements/fxa-tos.html"> | ||
| <link rel="import" href="elements/fxa-pp.html"> | ||
|
|
||
| <script defer src="../shared/js/lazy_loader.js"></script> | ||
| <script defer src="../shared/js/l10n.js"></script> | ||
|
|
||
| <script defer src="js/utils.js"></script> | ||
| <script defer src="js/fxam_server_request.js"></script> | ||
| <script defer src="js/fxam_overlay.js"></script> | ||
| <script defer src="js/fxam_error_overlay.js"></script> | ||
| <script defer src="js/fxam_navigation.js"></script> | ||
| <script defer src="js/fxam_ui.js"></script> | ||
| <script defer src="js/fxam_manager.js"></script> | ||
| <script defer src="js/fxam_states.js"></script> | ||
| <script defer src="js/fxam_module.js"></script> | ||
|
|
||
| </head> | ||
| <body> | ||
| <section role="region" class="skin-organic"> | ||
| <header> | ||
| <button id="fxa-module-close"><span class="icon icon-close">close</span></button> | ||
| <h1 data-l10n-id="firefox-accounts-title">Firefox Accounts</h1> | ||
| </header> | ||
| <progress id="fxa-progress" value="" max="100"></progress> | ||
| <article id="step-container"> | ||
| <section id="fxa-intro" is="fxa-intro" class="screen"></section> | ||
| <section id="fxa-email" is="fxa-email" class="screen"></section> | ||
| <section id="fxa-set-password" is="fxa-set-password" class="screen fxa-password"></section> | ||
| <section id="fxa-enter-password" is="fxa-enter-password" class="screen fxa-password"></section> | ||
| <section id="fxa-signup-success" is="fxa-signup-success" class="screen"></section> | ||
| <section id="fxa-signin-success" is="fxa-signin-success" class="screen"></section> | ||
| <section id="fxa-password-reset-success" is="fxa-password-reset-success" class="screen"></section> | ||
| <section id="fxa-tos" is="fxa-tos" class="screen" data-navigation="back"></section> | ||
| <section id="fxa-pp" is="fxa-pp" class="screen" data-navigation="back"></section> | ||
| </article> | ||
| <nav role="navigation" class="horizontal navigation navigation-single-button" id="fxa-module-navigation"> | ||
| <button id="fxa-module-back" class="left" data-l10n-id="fxa-back"> | ||
| Back | ||
| </button> | ||
| <button id="fxa-module-next" class="recommend right" data-l10n-id="fxa-next"> | ||
| Next | ||
| </button> | ||
| <button id="fxa-module-done" class="recommend right" data-l10n-id="fxa-done"> | ||
| Done | ||
| </button> | ||
| </nav> | ||
| </section> | ||
| <!-- Progress overlay --> | ||
| <section id="fxa-overlay" role="dialog"> | ||
| <progress></progress> | ||
| <p id="fxa-overlay-msg" data-l10n-id="fxa-connecting-to-firefox">Connecting to Firefox</p> | ||
| </section> | ||
| <!-- Error message overlay --> | ||
| <form role="dialog" data-type="confirm" id="fxa-error-overlay" class="fade-in"> | ||
| <section> | ||
| <h1 id="fxa-error-title">Error message</h1> | ||
| <p><small id="fxa-error-msg">Error message.</small></p> | ||
| <menu> | ||
| <button class="full" data-l10n-id="fxa-ok" id="fxa-error-ok">OK</button> | ||
| </menu> | ||
| </section> | ||
| </form> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- / | ||
| /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
|
There was a problem hiding this comment. I'm missing a minimal documentation that explain this module here. I can understand for the name, but doc doesn't kill kittens at the end of the day. |
||
| /* | ||
| * FxaModuleErrorOverlay shows an error prompt to the user with the info | ||
| * retrieved after getting an error. | ||
| * As params, we can define Title and Message. | ||
| */ | ||
|
|
||
| var FxaModuleErrorOverlay = { | ||
| init: function fxam_error_overlay_init() { | ||
| if (this.initialized) | ||
|
There was a problem hiding this comment. nit: please use curly brackets even if it's a single line. If we planning to change to jslint, that I think we are trying (or at least I would love) that will be an error. Also for me is always clear. |
||
| return; | ||
|
|
||
| Utils.importElements(this, | ||
| 'fxa-error-overlay', | ||
| 'fxa-error-title', | ||
| 'fxa-error-msg', | ||
| 'fxa-error-ok' | ||
| ); | ||
|
|
||
| this.fxaErrorOk.addEventListener('click', this.hide.bind(this)); | ||
| this.fxaErrorOverlay.addEventListener('submit', this.prevent); | ||
|
|
||
| this.initialized = true; | ||
| }, | ||
|
|
||
| show: function fxam_error_overlay_show(title, message) { | ||
| this.init(); | ||
|
|
||
| this.fxaErrorTitle.textContent = title || ''; | ||
| this.fxaErrorMsg.textContent = message || ''; | ||
|
|
||
| this.fxaErrorOverlay.classList.add('show'); | ||
| }, | ||
|
|
||
| hide: function fxam_overlay_hide() { | ||
| this.init(); | ||
|
|
||
| this.fxaErrorOverlay.classList.remove('show'); | ||
| }, | ||
|
|
||
| prevent: function fxam_prevent(event) { | ||
| event.preventDefault(); | ||
| event.stopPropagation(); | ||
| } | ||
| }; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- / | ||
| /* vim: set shiftwidth=2 tabstop=2 autoindent cindent expandtab: */ | ||
|
|
||
| 'use strict'; | ||
|
|
||
| (function(exports) { | ||
|
|
||
| var Errors = { | ||
| CANNOT_CREATE_ACCOUNT: { | ||
| title: 'fxa-cannot-create-title', | ||
| message: 'fxa-cannot-create-message' | ||
| }, | ||
| RESET_PASSWORD_ERROR: { | ||
| title: 'fxa-reset-password-error-title', | ||
| message: 'fxa-reset-password-error-message' | ||
| }, | ||
| INVALID_ACCOUNTID: { | ||
| title: 'fxa-invalid-email-title', | ||
| message: 'fxa-invalid-email-message' | ||
| }, | ||
| INVALID_PASSWORD: { | ||
| title: 'fxa-invalid-password-title', | ||
| message: 'fxa-invalid-password-message' | ||
| }, | ||
| ALREADY_SIGNED_IN_USER: { | ||
| title: 'fxa-already-signed-in-title', | ||
| message: 'fxa-already-signed-in-message' | ||
| }, | ||
| INTERNAL_ERROR_INVALID_USER: { | ||
| title: 'fxa-generic-error-title', | ||
| message: 'fxa-generic-error-message' | ||
| }, | ||
| SERVER_ERROR: { | ||
| title: 'fxa-generic-error-title', | ||
| message: 'fxa-generic-error-message' | ||
| }, | ||
| NO_TOKEN_SESSION: { | ||
| title: 'fxa-generic-error-title', | ||
| message: 'fxa-generic-error-message' | ||
| }, | ||
| GENERIC_ERROR: { | ||
| title: 'fxa-generic-error-title', | ||
| message: 'fxa-generic-error-message' | ||
| }, | ||
| OFFLINE: { | ||
| title: 'fxa-offline-error-title', | ||
| message: 'fxa-offline-error-message' | ||
| } | ||
| }; | ||
|
|
||
| function _getError(error) { | ||
| var _ = navigator.mozL10n.get; | ||
|
There was a problem hiding this comment. Can we avoid getting mozL10n when getting each different error? There was a problem hiding this comment. Our approach is loading the resources only when needed, so that's why we use the l10n key for retrieving the value. There was a problem hiding this comment. You can still cache |
||
| var l10nKeys = Errors[error]; | ||
| return { | ||
| title: _(l10nKeys.title), | ||
| message: _(l10nKeys.message) | ||
| }; | ||
| } | ||
|
|
||
|
|
||
| var FxaModuleErrors = { | ||
| responseToParams: function fxame_responseToParams(response) { | ||
| return response && response.error ? | ||
| _getError(response.error) : _getError('GENERIC_ERROR'); | ||
| } | ||
| }; | ||
|
|
||
| exports.FxaModuleErrors = FxaModuleErrors; | ||
| }(this)); | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why not reusing fxa-enter-password.html?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
In this case is simple to have separate
.jsand.htmlmore than reusing and adding more complexity deciding which elements should be hidden or not depending of the screen. Performance is better because we are loading only the resources we need based on theflow.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fair enough.