From c8eb4d8fcde4127984b8741174d74b5017c06a6e Mon Sep 17 00:00:00 2001
From: Brett Kochendorfer <bkochendorfer@mozilla.com>
Date: Thu, 5 Oct 2023 11:09:42 -0500
Subject: [PATCH 1/4] feat: Mozilla Accounts Post Nov 1

Add ability to show different banner after November 1st and to change
the Firefox Account logo to Mozilla.
---
 config/development.json            |  3 +-
 config/local.json                  |  3 +-
 config/production.json             |  3 +-
 src/html/index.html                | 58 +++++++++++++++++++++++++++---
 src/js/decorators.js               |  2 ++
 src/js/handlers.js                 |  1 +
 src/scss/components/_branding.scss |  9 +++++
 7 files changed, 72 insertions(+), 7 deletions(-)

diff --git a/config/development.json b/config/development.json
index 02cadd4..6bd8975 100644
--- a/config/development.json
+++ b/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": "true",
+    "mozilla_accounts_banner_post": "false"
   },
   "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",
diff --git a/config/local.json b/config/local.json
index 3278257..aaa62e8 100644
--- a/config/local.json
+++ b/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 *",
diff --git a/config/production.json b/config/production.json
index 361ff0d..28dbb22 100644
--- a/config/production.json
+++ b/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",
diff --git a/src/html/index.html b/src/html/index.html
index 82661a6..deafe42 100644
--- a/src/html/index.html
+++ b/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>Log 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 }}}",
diff --git a/src/js/decorators.js b/src/js/decorators.js
index 8136769..3ececb7 100644
--- a/src/js/decorators.js
+++ b/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' ),
diff --git a/src/js/handlers.js b/src/js/handlers.js
index 2b64b5b..8005dab 100644
--- a/src/js/handlers.js
+++ b/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' ),
diff --git a/src/scss/components/_branding.scss b/src/scss/components/_branding.scss
index 9a83a7f..9e2fec4 100644
--- a/src/scss/components/_branding.scss
+++ b/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;
   }

From d7ca1527be90b2b628a68896b50c5fe7e88b9e29 Mon Sep 17 00:00:00 2001
From: Brett Kochendorfer <bkochendorfer@mozilla.com>
Date: Thu, 5 Oct 2023 11:12:27 -0500
Subject: [PATCH 2/4] Change wording to match spec

---
 src/html/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/html/index.html b/src/html/index.html
index deafe42..9565281 100644
--- a/src/html/index.html
+++ b/src/html/index.html
@@ -158,7 +158,7 @@
               <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>Log in with Mozilla</span>
+                  <span>Sign in with Mozilla</span>
                 </button>
               </li>
               <li data-optional-login-method="github">

From 8e2273c33bee9442971587ac259efe4136230ef8 Mon Sep 17 00:00:00 2001
From: Brett Kochendorfer <bkochendorfer@mozilla.com>
Date: Thu, 5 Oct 2023 11:14:48 -0500
Subject: [PATCH 3/4] oops check in the new src

---
 src/js/decorators/check-if-accounts-banner-post.js |  9 +++++++++
 src/js/decorators/show-mozilla-accounts.js         | 11 +++++++++++
 src/js/handlers/mozilla-accounts-post.js           |  5 +++++
 3 files changed, 25 insertions(+)
 create mode 100644 src/js/decorators/check-if-accounts-banner-post.js
 create mode 100644 src/js/decorators/show-mozilla-accounts.js
 create mode 100644 src/js/handlers/mozilla-accounts-post.js

diff --git a/src/js/decorators/check-if-accounts-banner-post.js b/src/js/decorators/check-if-accounts-banner-post.js
new file mode 100644
index 0000000..cbc9972
--- /dev/null
+++ b/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 );
+  }
+};
diff --git a/src/js/decorators/show-mozilla-accounts.js b/src/js/decorators/show-mozilla-accounts.js
new file mode 100644
index 0000000..22637d5
--- /dev/null
+++ b/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 );
+  }
+};
diff --git a/src/js/handlers/mozilla-accounts-post.js b/src/js/handlers/mozilla-accounts-post.js
new file mode 100644
index 0000000..7bfdeec
--- /dev/null
+++ b/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)
+};

From da19396f11bdf868e7c379c8790f1899230d6f2d Mon Sep 17 00:00:00 2001
From: Brett Kochendorfer <bkochendorfer@mozilla.com>
Date: Thu, 5 Oct 2023 11:30:56 -0500
Subject: [PATCH 4/4] prep to display in dev

---
 config/development.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/config/development.json b/config/development.json
index 6bd8975..36fac30 100644
--- a/config/development.json
+++ b/config/development.json
@@ -12,8 +12,8 @@
     "autologin": "true",
     "iam_api_lookup": "true",
     "maintenance_mode": "false",
-    "mozilla_accounts_banner_pre": "true",
-    "mozilla_accounts_banner_post": "false"
+    "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",