@salesforcedevs/dx-components 0.59.0-avatar-button-2 → 0.59.0-avatar-button-5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.59.0-avatar-button-2",
+    "version": "0.59.0-avatar-button-5",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/avatarButton/avatarButton.css

@@ -28,10 +28,6 @@
     width: var(--dx-g-spacing-2xl);
 }
 
-.login-control {
-    margin-left: var(--dx-g-spacing-smd);
-}
-
 .login-container {
     padding: 16px;
 }

package/src/modules/dx/avatarButton/avatarButton.html

@@ -21,7 +21,11 @@
                         <a href="#" class="inline-link">Switch account</a>
                         &nbsp;&nbsp;|&nbsp;&nbsp;
                         -->
-                        <a href="#" onclick={handleLogout} class="inline-link">
+                        <a
+                            href="#"
+                            onclick={handleComponentLogout}
+                            class="inline-link"
+                        >
                             Logout
                         </a>
                     </div>

package/src/modules/dx/avatarButton/avatarButton.ts

@@ -40,7 +40,7 @@ export default class AvatarButton extends LightningElement {
 
     connectedCallback() {
         window.addEventListener("tbid-login", this.handleSsoLogin);
-        window.addEventListener("tbid-logout", this.handleLogout);
+        window.addEventListener("tbid-logout", this.handleSsoLogout);
 
         // Whenever this component is added to the DOM, immediately request user info; if the user is logged in
         // and we receive the info, this component will display the avatar UI; otherwise, it will display the login
@@ -50,29 +50,33 @@ export default class AvatarButton extends LightningElement {
 
     disconnectedCallback() {
         window.removeEventListener("tbid-login", this.handleSsoLogin);
-        window.removeEventListener("tbid-logout", this.handleLogout);
+        window.removeEventListener("tbid-logout", this.handleSsoLogout);
     }
 
-    // This will only be called for "seamless SSO" login by the embedded login widget (SFWidget) on the website, if it exists.
-    private handleSsoLogin(event: Event) {
+    // This handles logout from within this component, rather than from SSO via the SFIDWidget.
+    private handleLogout = async (isSsoLogout: boolean) => {
+        this._didReceiveUserInfo = false;
+        this.isLoading = false;
+        this.updateAvatarWithUserInfo({}); // clear old info
+
+        fetch(`${TBID_API_LOGOUT_URL}?isSsoLogout=${isSsoLogout}`); // no need to await this
+    };
+
+    // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
+    private handleSsoLogin = (event: Event) => {
         const userInfo = (event as CustomEvent).detail;
         if (userInfo) {
             this.updateAvatarWithUserInfo(userInfo);
             this._didReceiveUserInfo = true;
         }
-    }
+    };
 
-    // This can be called *either* by the embedded login widget (SFWidget) on the website, if it exists,
-    // in the event of "seamless SSO" logout, *or* by a user clicking logout on this component.
-    private async handleLogout() {
-        this._didReceiveUserInfo = false;
-        this.isLoading = false;
-        this.updateAvatarWithUserInfo({}); // clear old info
+    // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
+    private handleSsoLogout = this.handleLogout.bind(this, true);
 
-        fetch(TBID_API_LOGOUT_URL); // no need to await this
-    }
+    private handleComponentLogout = this.handleLogout.bind(this, false);
 
-    private updateAvatarWithUserInfo(userInfo: any) {
+    private updateAvatarWithUserInfo = (userInfo: any) => {
         if (!userInfo) {
             return;
         }
@@ -82,9 +86,9 @@ export default class AvatarButton extends LightningElement {
         this.userInfo.lastName = userInfo.family_name;
         this.userInfo.username = userInfo.preferred_username;
         // TODO: Consider displaying initials if no photo. Is there always a photo?
-    }
+    };
 
-    private async requestUserInfo() {
+    private requestUserInfo = async () => {
         this.isLoading = true;
 
         try {
@@ -101,5 +105,5 @@ export default class AvatarButton extends LightningElement {
         }
 
         this.isLoading = false;
-    }
+    };
 }

package/src/modules/dx/header/header.html

@@ -19,7 +19,9 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
-                <dx-avatar-button></dx-avatar-button>
+                <div if:true={showTbidLogin} class="header-tbid-login">
+                    <dx-avatar-button></dx-avatar-button>
+                </div>
                 <div if:true={showSignup} class="header-login-signup">
                     <dx-button
                         aria-label="Sign Up For Salesforce Developer Edition"

package/src/modules/dx/header/header.ts

@@ -1,6 +1,10 @@
 import { HeaderBase } from "dxBaseElements/headerBase";
 
 export default class Header extends HeaderBase {
+    private get showTbidLogin(): boolean {
+        return this.showSignup;
+    }
+
     private get showSignup(): boolean {
         return this.signupLink
             ? (this.mobile && !this.isSearchOpen) || !this.mobile

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -109,12 +109,14 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
     margin-left: var(--dx-g-spacing-sm);
 }
 
-.header-login-signup {
+.header-login-signup,
+.header-tbid-login {
     display: flex;
     align-items: center;
 }
 
-.header-login-signup dx-button {
+.header-login-signup dx-button,
+.header-tbid-login dx-avatar-button {
     margin-left: var(--dx-g-spacing-smd);
 }