Merge pull request #379 from bkochendorfer/IAM-1199-post-nov-1

feat: Mozilla Accounts Post Nov 1

config/development.json

@@ -12,7 +12,8 @@
     "autologin": "true",
     "iam_api_lookup": "true",
     "maintenance_mode": "false",
-    "mozilla_accounts_banner_pre": "true"
+    "mozilla_accounts_banner_pre": "false",
+    "mozilla_accounts_banner_post": "true"
   },
   "supportedLoginMethods": [ "github", "google-oauth2", "firefoxaccounts", "email" ],
   "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

@@ -12,7 +12,8 @@
     "autologin": "true",
     "iam_api_lookup": "true",
     "maintenance_mode": "false",
-    "mozilla_accounts_banner_pre": "true"
+    "mozilla_accounts_banner_pre": "false",
+    "mozilla_accounts_banner_post": "true"
   },
   "supportedLoginMethods": [ "github", "google-oauth2", "firefoxaccounts", "email" ],
   "csp": "default-src *",

config/production.json

@@ -11,7 +11,8 @@
     "autologin": "true",
     "iam_api_lookup": "true",
     "maintenance_mode": "false",
-    "mozilla_accounts_banner_pre": "true"
+    "mozilla_accounts_banner_pre": "true",
+    "mozilla_accounts_banner_post": "false"
   },
   "supportedLoginMethods": [ "github", "google-oauth2", "firefoxaccounts", "email" ],
   "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

@@ -33,6 +33,9 @@
    autologin: {{{ features.autologin }}}
    iam_api_lookup: {{{ features.iam_api_lookup }}}
    supportedLoginMethods: {{{ supportedLoginMethods }}}
+   maintenance_mode: "{{{ features.maintenance_mode }}}"
+   mozilla_accounts_banner_pre: "{{{ features.mozilla_accounts_banner_pre }}}"
+   mozilla_accounts_banner_post: "{{{ features.mozilla_accounts_banner_post }}}"
   Display names:
     github: {{{ displayNames.github }}}
     google-oauth2: {{{ displayNames.google-oauth2 }}}
@@ -98,6 +101,35 @@
           </div>
         </div>
       </div>
+      <div data-decorator="check-if-accounts-banner-post" hidden>
+      <div class="banner-branding" id="accounts-banner-post">
+        <div class="flex">
+          <div class="cta-post flex">
+            <div class="flex-none order-last">
+                  <button
+                      class="close-brand-banner"
+                      aria-label="Close Banner"
+                      type=button
+                      >
+                      <img
+                          src="{{{ cdn }}}/images/x.svg"
+                          class="cursor-pointer"
+                          data-handler="mozilla-accounts-post"
+                          alt="Close Banner"
+                      />
+                  </button>
+              </div>
+                <div class="flex-initial max-w-md">
+                    <p class="text-m">
+                        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.
+                        <a href="https://support.mozilla.org/kb/firefox-accounts-renamed-mozilla-accounts">Learn more</a>
+                    </p>
+                </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
     <div class="card">
       <a href="https://mozilla.org" class="logo" target="_blank"><img alt="Mozilla" src="{{{ cdn }}}/images/mozilla.svg" /></a>
       <noscript><p>This login form requires JavaScript to work, please enable it to log in.</p></noscript>
@@ -117,12 +149,18 @@
             <input type="submit" class="button button--full-width" id="enter-initial" value="Enter" />
             <hr>
             <ul class="login-options list list--plain">
-              <li data-optional-login-method="firefoxaccounts">
+              <li data-optional-login-method="firefoxaccounts" id="firefoxaccounts">
                 <button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
                   <img class="icon" src="{{{ cdn }}}/images/firefox.svg" alt="">
                   <span>Log in with Firefox</span>
                 </button>
               </li>
+              <li data-optional-login-method="firefoxaccounts" id="mozillaaccounts" data-decorator="show-mozilla-accounts" hidden>
+                <button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
+                  <img class="icon" src="{{{ cdn }}}/images/m.svg" alt="">
+                  <span>Sign in with Mozilla</span>
+                </button>
+              </li>
               <li data-optional-login-method="github">
                 <button class="button button--github button--full-width button--social button--secondary" type="button" data-handler="authorise-github">
                   <img class="icon icon-default" src="{{{ cdn }}}/images/github.svg" alt="">
@@ -156,11 +194,16 @@
             <input type="submit" class="button button--full-width" id="enter-initial-signup" value="Enter" />
             <hr>
             <ul class="login-options list list--plain">
-              <li data-optional-login-method="firefoxaccounts">
+              <li data-optional-login-method="firefoxaccounts" id="firefoxaccounts">
                 <button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
                   <img class="icon" src="{{{ cdn }}}/images/firefox.svg" alt="">
                   <span>Continue with Firefox</span>
                 </button>
+                <li data-optional-login-method="firefoxaccounts" id="mozillaaccounts" data-decorator="show-mozilla-accounts">
+                <button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
+                  <img class="icon" src="{{{ cdn }}}/images/m.svg" alt="">
+                  <span>Continue with Mozilla</span>
+                </button>
               </li>
               <li data-optional-login-method="github">
                 <button class="button button--github button--full-width button--social button--secondary" type="button" data-handler="authorise-github">
@@ -205,12 +248,18 @@
             <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>
             <hr>
             <ul class="login-options list list--plain">
-              <li data-optional-login-method="firefoxaccounts">
+              <li data-optional-login-method="firefoxaccounts" id="firefoxaccounts">
                 <button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
                   <img class="icon" src="{{{ cdn }}}/images/firefox.svg" alt="">
                   <span>Continue with Firefox</span>
                 </button>
               </li>
+              <li data-optional-login-method="firefoxaccounts" id="mozillaccounts" data-decorator="show-mozilla-accounts">
+                <button class="button button--full-width button--social button--secondary" type="button" data-handler="authorise-firefoxaccounts">
+                  <img class="icon" src="{{{ cdn }}}/images/m.svg" alt="">
+                  <span>Continue with Mozilla</span>
+                </button>
+              </li>
               <li data-optional-login-method="github">
                 <button class="button button--github button--full-width button--social button--secondary" type="button" data-handler="authorise-github">
                   <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>
         "autologin": "{{{ features.autologin }}}",
         "iam_api_lookup": "{{{ features.iam_api_lookup }}}",
         "maintenance_mode": "{{{ features.maintenance_mode }}}",
-        "mozilla_accounts_banner_pre": "{{{ features.mozilla_accounts_banner_pre }}}"
+        "mozilla_accounts_banner_pre": "{{{ features.mozilla_accounts_banner_pre }}}",
+        "mozilla_accounts_banner_post": "{{{ features.mozilla_accounts_banner_post }}}"
       },
       "supportedLoginMethods": "{{{ supportedLoginMethods }}}",
       "logout_url": "{{{ logout_url }}}",

src/js/decorators.js

@@ -5,6 +5,7 @@
 var decorators = {
   'check-if-maintenance-mode': require( 'decorators/check-if-maintenance-mode' ),
   'check-if-accounts-banner-pre': require( 'decorators/check-if-accounts-banner-pre' ),
+  'check-if-accounts-banner-post': require( 'decorators/check-if-accounts-banner-post' ),
   'check-keyboard': require( 'decorators/check-keyboard' ),
   'decide-screen': require( 'decorators/decide-screen' ),
   'display-rp-name': require( 'decorators/display-rp-name' ),
@@ -16,6 +17,7 @@ var decorators = {
   'load-ga': require( 'decorators/load-ga' ),
   'prevent-clickjack': require( 'decorators/prevent-clickjack' ),
   'track-password-manager-usage': require( 'decorators/track-password-manager-usage' ),
+  'show-mozilla-accounts': require( 'decorators/show-mozilla-accounts' ),
   'set-autologin-preference': require( 'decorators/set-autologin-preference' ),
   'submit-with-enter': require( 'decorators/submit-with-enter' ),
   'tooltip': require( 'decorators/tooltip' ),

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

@@ -0,0 +1,9 @@
+var ui = require( 'helpers/ui' );
+
+module.exports = function checkIfAccountBannerPost( banner ) {
+  var mozilla_accounts_banner_post = NLX.features.mozilla_accounts_banner_post;
+
+  if ( mozilla_accounts_banner_post === 'true' && window.localStorage.getItem('mozilla-accounts-banner-post') != 1 ) {
+    ui.show( banner );
+  }
+};

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

@@ -0,0 +1,11 @@
+var ui = require( 'helpers/ui' );
+
+module.exports = function showMozillaAccounts( accounts ) {
+  var mozilla_accounts_banner_post = NLX.features.mozilla_accounts_banner_post;
+  var firefox_accounts = document.getElementById('firefoxaccounts');
+
+  if ( mozilla_accounts_banner_post  === 'true') {
+    ui.show( accounts );
+    ui.hide( firefox_accounts );
+  }
+};

src/js/handlers.js

@@ -8,6 +8,7 @@
 
 module.exports = {
   'mozilla-accounts-pre': require( 'handlers/mozilla-accounts-pre' ),
+  'mozilla-accounts-post': require( 'handlers/mozilla-accounts-post' ),
   'enter': require( 'handlers/enter' ),
   'go-to-initial-page': require( 'handlers/go-to-initial-page' ),
   'authorise-ldap': require( 'handlers/authorise-ldap' ),

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

@@ -0,0 +1,5 @@
+module.exports = function mozillaAccountsPost ( element ) {
+  var banner = document.getElementById("accounts-banner-post");
+  banner.style.display = "none";
+  window.localStorage.setItem('mozilla-accounts-banner-post', 1)
+};

src/scss/components/_branding.scss

@@ -21,6 +21,11 @@
     margin: auto;
   }
 
+  .cta-post {
+    max-width: 75em;
+    margin: auto;
+  }
+
   a {
     color: $black;
     text-decoration: underline;
@@ -34,6 +39,10 @@
     font-size: 14px;
   }
 
+  .text-m {
+    font-size: 11px;
+  }
+
   .text-s {
     font-size: 10px;
   }