Update web sso content to indicate window OK to close (#720)

* Update web sso content to indicate window OK to close

This is done after the authResult handoff message is delivered to the
extension. It is not possible to close the window from javascript as
closing a window is limited to the script that opened it.

If we maintain a reference to the web window, it should be possible to
subscribe to the authResult message and close the web windows from the
browser.

* Use i18n for close tab message

* delete cookie after it is used

Co-authored-by: Matt Gibson <mdgibson@Matts-MBP.lan>

src/app/accounts/sso.component.ts

@@ -53,6 +53,9 @@ export class SsoComponent extends BaseSsoComponent {
 
     async submit() {
         await this.storageService.save(IdentifierStorageKey, this.identifier);
+        if (this.clientId === 'browser') {
+            document.cookie = `ssoHandOffMessage=${this.i18nService.t('ssoHandOff')};SameSite=strict`
+        }
         super.submit();
     }
 }

src/connectors/sso.html

@@ -19,9 +19,11 @@
     <div class="mt-5 d-flex justify-content-center">
         <div>
             <img src="../images/logo-dark@2x.png" class="mb-4 logo" alt="Bitwarden">
-            <p class="text-center">
+            <div id="content">
-                <i class="fa fa-spinner fa-spin fa-2x text-muted" title="Loading" aria-hidden="true"></i>
+                <p class="text-center">
-            </p>
+                    <i class="fa fa-spinner fa-spin fa-2x text-muted" title="Loading" aria-hidden="true"></i>
+                </p>
+            </div>
         </div>
     </div>
 </body>

src/connectors/sso.ts

@@ -37,6 +37,10 @@ function getQsParam(name: string) {
 
 function initiateBrowserSso(code: string, state: string) {
     window.postMessage({ command: 'authResult', code: code, state: state }, '*');
+    let handOffMessage = ('; ' + document.cookie).split('; ssoHandOffMessage=').pop().split(';').shift();
+    document.cookie = 'ssoHandOffMessage=;SameSite=strict;max-age=0'
+    document.getElementById('content').innerHTML =
+        `<p>${handOffMessage}</p>`;
 }
 
 function extractFromRegex(s: string, regexString: string) {

src/locales/en/messages.json

@@ -3193,6 +3193,9 @@
   "enterpriseSingleSignOn": {
     "message": "Enterprise Single Sign-On"
   },
+  "ssoHandOff": {
+    "message": "You may now close this tab and continue in the extension."
+  },
   "businessPortal": {
     "message": "Business Portal",
     "description": "The web portal used by business organizations for configuring certain features."