Skip to content

Commit 2740628

Browse files
dividehexdividehex
authored
Merge pull request #379 from bkochendorfer/IAM-1199-post-nov-1
feat: Mozilla Accounts Post Nov 1
2 parents 7501656 + da19396 commit 2740628

10 files changed

+97
-7
lines changed

‎config/development.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"autologin": "true",
1313
"iam_api_lookup": "true",
1414
"maintenance_mode": "false",
15-
"mozilla_accounts_banner_pre": "true"
15+
"mozilla_accounts_banner_pre": "false",
16+
"mozilla_accounts_banner_post": "true"
1617
},
1718
"supportedLoginMethods": [ "github", "google-oauth2", "firefoxaccounts", "email" ],
1819
"csp": "default-src 'none'; connect-src 'self' https://iam.api.test.sso.allizom.org; script-src 'self' https://cdn.sso.allizom.org https://www.googletagmanager.com https://www.google-analytics.com; style-src 'self' https://cdn.sso.allizom.org; font-src 'self' https://cdn.sso.allizom.org; img-src 'self' https://cdn.sso.allizom.org https://www.google-analytics.com",

‎config/local.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"autologin": "true",
1313
"iam_api_lookup": "true",
1414
"maintenance_mode": "false",
15-
"mozilla_accounts_banner_pre": "true"
15+
"mozilla_accounts_banner_pre": "false",
16+
"mozilla_accounts_banner_post": "true"
1617
},
1718
"supportedLoginMethods": [ "github", "google-oauth2", "firefoxaccounts", "email" ],
1819
"csp": "default-src *",

‎config/production.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@
1111
"autologin": "true",
1212
"iam_api_lookup": "true",
1313
"maintenance_mode": "false",
14-
"mozilla_accounts_banner_pre": "true"
14+
"mozilla_accounts_banner_pre": "true",
15+
"mozilla_accounts_banner_post": "false"
1516
},
1617
"supportedLoginMethods": [ "github", "google-oauth2", "firefoxaccounts", "email" ],
1718
"csp": "default-src 'none'; connect-src 'self' https://iam.api.sso.mozilla.com; script-src 'self' https://cdn.sso.mozilla.com https://www.googletagmanager.com https://www.google-analytics.com; style-src 'self' https://cdn.sso.mozilla.com; font-src 'self' https://cdn.sso.mozilla.com; img-src 'self' https://cdn.sso.mozilla.com https://www.google-analytics.com",

‎src/html/index.html

Lines changed: 54 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,9 @@
3333
autologin: {{{ features.autologin }}}
3434
iam_api_lookup: {{{ features.iam_api_lookup }}}
3535
supportedLoginMethods: {{{ supportedLoginMethods }}}
36+
maintenance_mode: "{{{ features.maintenance_mode }}}"
37+
mozilla_accounts_banner_pre: "{{{ features.mozilla_accounts_banner_pre }}}"
38+
mozilla_accounts_banner_post: "{{{ features.mozilla_accounts_banner_post }}}"
3639
Display names:
3740
github: {{{ displayNames.github }}}
3841
google-oauth2: {{{ displayNames.google-oauth2 }}}
@@ -98,6 +101,35 @@
98101
</div>
99102
</div>
100103
</div>
104+
<div data-decorator="check-if-accounts-banner-post" hidden>
105+
<div class="banner-branding" id="accounts-banner-post">
106+
<div class="flex">
107+
<div class="cta-post flex">
108+
<div class="flex-none order-last">
109+
<button
110+
class="close-brand-banner"
111+
aria-label="Close Banner"
112+
type=button
113+
>
114+
<img
115+
src="{{{ cdn }}}/images/x.svg"
116+
class="cursor-pointer"
117+
data-handler="mozilla-accounts-post"
118+
alt="Close Banner"
119+
/>
120+
</button>
121+
</div>
122+
<div class="flex-initial max-w-md">
123+
<p class="text-m">
124+
We’ve renamed Firefox accounts to Mozilla accounts. You’ll still sign in with the same username and password, and there are no other changes to the products that you use.
125+
<a href="https://support.mozilla.org/kb/firefox-accounts-renamed-mozilla-accounts">Learn more</a>
126+
</p>
127+
</div>
128+
</div>
129+
</div>
130+
</div>
131+
</div>
132+
101133
<div class="card">
102134
<a href="https://mozilla.org" class="logo" target="_blank"><img alt="Mozilla" src="{{{ cdn }}}/images/mozilla.svg" /></a>
103135
<noscript><p>This login form requires JavaScript to work, please enable it to log in.</p></noscript>
@@ -117,12 +149,18 @@
117149
<input type="submit" class="button button--full-width" id="enter-initial" value="Enter" />
118150
<hr>
119151
<ul class="login-options list list--plain">
120-
<li data-optional-login-method="firefoxaccounts">
152+
<li data-optional-login-method="firefoxaccounts" id="firefoxaccounts">
121153
<button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
122154
<img class="icon" src="{{{ cdn }}}/images/firefox.svg" alt="">
123155
<span>Log in with Firefox</span>
124156
</button>
125157
</li>
158+
<li data-optional-login-method="firefoxaccounts" id="mozillaaccounts" data-decorator="show-mozilla-accounts" hidden>
159+
<button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
160+
<img class="icon" src="{{{ cdn }}}/images/m.svg" alt="">
161+
<span>Sign in with Mozilla</span>
162+
</button>
163+
</li>
126164
<li data-optional-login-method="github">
127165
<button class="button button--github button--full-width button--social button--secondary" type="button" data-handler="authorise-github">
128166
<img class="icon icon-default" src="{{{ cdn }}}/images/github.svg" alt="">
@@ -156,11 +194,16 @@
156194
<input type="submit" class="button button--full-width" id="enter-initial-signup" value="Enter" />
157195
<hr>
158196
<ul class="login-options list list--plain">
159-
<li data-optional-login-method="firefoxaccounts">
197+
<li data-optional-login-method="firefoxaccounts" id="firefoxaccounts">
160198
<button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
161199
<img class="icon" src="{{{ cdn }}}/images/firefox.svg" alt="">
162200
<span>Continue with Firefox</span>
163201
</button>
202+
<li data-optional-login-method="firefoxaccounts" id="mozillaaccounts" data-decorator="show-mozilla-accounts">
203+
<button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
204+
<img class="icon" src="{{{ cdn }}}/images/m.svg" alt="">
205+
<span>Continue with Mozilla</span>
206+
</button>
164207
</li>
165208
<li data-optional-login-method="github">
166209
<button class="button button--github button--full-width button--social button--secondary" type="button" data-handler="authorise-github">
@@ -205,12 +248,18 @@
205248
<a href="https://wiki.mozilla.org/IAM/Frequently_asked_questions#Q:_Why_do_you_support_email_login_.28.22passwordless.22.29_if_it.27s_less_safe_than_other_methods.3F" class="button button--text-only button--unpadded" target="_blank">Why an email?</a>
206249
<hr>
207250
<ul class="login-options list list--plain">
208-
<li data-optional-login-method="firefoxaccounts">
251+
<li data-optional-login-method="firefoxaccounts" id="firefoxaccounts">
209252
<button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
210253
<img class="icon" src="{{{ cdn }}}/images/firefox.svg" alt="">
211254
<span>Continue with Firefox</span>
212255
</button>
213256
</li>
257+
<li data-optional-login-method="firefoxaccounts" id="mozillaccounts" data-decorator="show-mozilla-accounts">
258+
<button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
259+
<img class="icon" src="{{{ cdn }}}/images/m.svg" alt="">
260+
<span>Continue with Mozilla</span>
261+
</button>
262+
</li>
214263
<li data-optional-login-method="github">
215264
<button class="button button--github button--full-width button--social button--secondary" type="button" data-handler="authorise-github">
216265
<img class="icon icon-default" src="{{{ cdn }}}/images/github.svg" alt="">
@@ -302,7 +351,8 @@ <h2 class="card__heading card__heading--iconless">Auto-login settings</h2>
302351
"autologin": "{{{ features.autologin }}}",
303352
"iam_api_lookup": "{{{ features.iam_api_lookup }}}",
304353
"maintenance_mode": "{{{ features.maintenance_mode }}}",
305-
"mozilla_accounts_banner_pre": "{{{ features.mozilla_accounts_banner_pre }}}"
354+
"mozilla_accounts_banner_pre": "{{{ features.mozilla_accounts_banner_pre }}}",
355+
"mozilla_accounts_banner_post": "{{{ features.mozilla_accounts_banner_post }}}"
306356
},
307357
"supportedLoginMethods": "{{{ supportedLoginMethods }}}",
308358
"logout_url": "{{{ logout_url }}}",

‎src/js/decorators.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
var decorators = {
66
'check-if-maintenance-mode': require( 'decorators/check-if-maintenance-mode' ),
77
'check-if-accounts-banner-pre': require( 'decorators/check-if-accounts-banner-pre' ),
8+
'check-if-accounts-banner-post': require( 'decorators/check-if-accounts-banner-post' ),
89
'check-keyboard': require( 'decorators/check-keyboard' ),
910
'decide-screen': require( 'decorators/decide-screen' ),
1011
'display-rp-name': require( 'decorators/display-rp-name' ),
@@ -16,6 +17,7 @@ var decorators = {
1617
'load-ga': require( 'decorators/load-ga' ),
1718
'prevent-clickjack': require( 'decorators/prevent-clickjack' ),
1819
'track-password-manager-usage': require( 'decorators/track-password-manager-usage' ),
20+
'show-mozilla-accounts': require( 'decorators/show-mozilla-accounts' ),
1921
'set-autologin-preference': require( 'decorators/set-autologin-preference' ),
2022
'submit-with-enter': require( 'decorators/submit-with-enter' ),
2123
'tooltip': require( 'decorators/tooltip' ),

‎src/js/decorators/check-if-accounts-banner-post.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
var ui = require( 'helpers/ui' );
2+
3+
module.exports = function checkIfAccountBannerPost( banner ) {
4+
var mozilla_accounts_banner_post = NLX.features.mozilla_accounts_banner_post;
5+
6+
if ( mozilla_accounts_banner_post === 'true' && window.localStorage.getItem('mozilla-accounts-banner-post') != 1 ) {
7+
ui.show( banner );
8+
}
9+
};

‎src/js/decorators/show-mozilla-accounts.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
var ui = require( 'helpers/ui' );
2+
3+
module.exports = function showMozillaAccounts( accounts ) {
4+
var mozilla_accounts_banner_post = NLX.features.mozilla_accounts_banner_post;
5+
var firefox_accounts = document.getElementById('firefoxaccounts');
6+
7+
if ( mozilla_accounts_banner_post === 'true') {
8+
ui.show( accounts );
9+
ui.hide( firefox_accounts );
10+
}
11+
};

‎src/js/handlers.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
module.exports = {
1010
'mozilla-accounts-pre': require( 'handlers/mozilla-accounts-pre' ),
11+
'mozilla-accounts-post': require( 'handlers/mozilla-accounts-post' ),
1112
'enter': require( 'handlers/enter' ),
1213
'go-to-initial-page': require( 'handlers/go-to-initial-page' ),
1314
'authorise-ldap': require( 'handlers/authorise-ldap' ),

‎src/js/handlers/mozilla-accounts-post.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = function mozillaAccountsPost ( element ) {
2+
var banner = document.getElementById("accounts-banner-post");
3+
banner.style.display = "none";
4+
window.localStorage.setItem('mozilla-accounts-banner-post', 1)
5+
};

‎src/scss/components/_branding.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,11 @@
2121
margin: auto;
2222
}
2323

24+
.cta-post {
25+
max-width: 75em;
26+
margin: auto;
27+
}
28+
2429
a {
2530
color: $black;
2631
text-decoration: underline;
@@ -34,6 +39,10 @@
3439
font-size: 14px;
3540
}
3641

42+
.text-m {
43+
font-size: 11px;
44+
}
45+
3746
.text-s {
3847
font-size: 10px;
3948
}

0 commit comments

Comments
 (0)