@salesforcedevs/dx-components 0.73.0 → 0.78.0-avatar-button

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

@@ -0,0 +1,129 @@
+:host {
+    --dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background: transparent;
+    --dx-c-button-custom-border: 1px solid transparent;
+    --dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
+    --dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
+    --dx-c-slot-empty-width: max-content;
+}
+
+.avatar-small-container {
+    padding: 2px 0;
+}
+
+.avatar {
+    border-radius: 100%;
+    border: 2px solid #0d9dda;
+}
+
+.avatar.avatar-small {
+    display: block;
+    height: var(--dx-g-spacing-lg);
+    width: var(--dx-g-spacing-lg);
+}
+
+.avatar.avatar-medium {
+    margin-bottom: 14px;
+    width: var(--dx-g-spacing-2xl);
+}
+
+.login-container {
+    padding: 16px;
+}
+
+.login-container.logged-in {
+    padding-top: 68px;
+}
+
+.header-img {
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+    z-index: -1;
+}
+
+.heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-display);
+    font-size: var(--dx-g-text-lg);
+    line-height: 28px;
+}
+
+.sub-heading {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 12px;
+    line-height: 18px;
+    padding: 8px 0;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.login-list-item {
+    padding-bottom: 10px;
+}
+
+.login-section ~ .login-section {
+    border-top: 1px solid var(--dx-g-gray-90);
+    margin-top: 12px;
+}
+
+.login-section-title {
+    color: var(--dx-g-gray-30);
+    display: inline-block;
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding: 20px 0 12px;
+}
+
+.login-link {
+    color: var(--dx-g-blue-vibrant-20);
+    display: block;
+}
+
+.login-link-label {
+    display: inline-block;
+    font-family: var(--dx-g-font-display);
+    font-size: 16px;
+    line-height: 24px;
+}
+
+.login-link-img {
+    display: inline-block;
+    height: 16px;
+    margin-left: 6px;
+    vertical-align: middle;
+}
+
+.login-link-icon {
+    display: inline-block;
+    margin-left: 6px;
+    vertical-align: baseline;
+}
+
+.login-link-blurb {
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+    padding-top: 4px;
+}
+
+.heading-links {
+    color: var(--dx-g-gray-90);
+    font-family: var(--dx-g-font-sans);
+    font-size: 14px;
+    line-height: 20px;
+}
+
+a.inline-link {
+    color: var(--dx-g-blue-vibrant-50);
+}

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

@@ -0,0 +1,155 @@
+<template>
+    <div if:true={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <div slot="control" class="avatar-small-container login-control">
+                <img src={userInfo.avatarImgSrc} class="avatar avatar-small" />
+            </div>
+            <div slot="content">
+                <div class="login-container logged-in">
+                    <img
+                        src="/assets/svg/login-widget-bg.png"
+                        class="header-img"
+                    />
+                    <img
+                        src={userInfo.avatarImgSrc}
+                        class="avatar avatar-medium"
+                    />
+                    <span class="heading">{userInfo.fullName}</span>
+                    <span class="sub-heading">{userInfo.username}</span>
+                    <div class="heading-links">
+                        <!--
+                        <a href="#" class="inline-link">Switch account</a>
+                        &nbsp;&nbsp;|&nbsp;&nbsp;
+                        -->
+                        <a
+                            href="#"
+                            onclick={handleComponentLogout}
+                            class="inline-link"
+                        >
+                            Logout
+                        </a>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">Trailblazer.me</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={settingsUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Settings
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href={profileUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Profile
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Developer Forums
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Our Developer Forums have a new home!&nbsp;
+                                    <a href="#" class="inline-link">
+                                        Learn more
+                                    </a>
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+    <div if:false={isLoggedIn}>
+        <dx-popover offset="small" width="320px" open-on-hover>
+            <dx-button
+                slot="control"
+                class="login-control"
+                icon-symbol="user"
+                icon-position="left"
+                loading={isLoading}
+                variant="custom"
+            >
+                Login
+            </dx-button>
+            <div slot="content">
+                <div class="login-container">
+                    <span class="heading">Login</span>
+                    <div class="login-section">
+                        <span class="login-section-title">Products</span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Salesforce
+                                    </span>
+                                    <img
+                                        class="login-link-img"
+                                        src="/assets/svg/salesforce-cloud.svg"
+                                        alt="Salesforce logo"
+                                    />
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                            <li class="login-list-item">
+                                <a href="#" class="login-link">
+                                    <span class="login-link-label">
+                                        Marketing Cloud
+                                    </span>
+                                    <dx-icon
+                                        class="login-link-icon"
+                                        symbol="new_window"
+                                        size="xsmall"
+                                    ></dx-icon>
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="login-section">
+                        <span class="login-section-title">
+                            Community & Resources
+                        </span>
+                        <ul>
+                            <li class="login-list-item">
+                                <a href={loginUrl} class="login-link">
+                                    <span class="login-link-label">
+                                        Trailblazer.me
+                                    </span>
+                                </a>
+                                <div class="login-link-blurb">
+                                    Login into access a rich community of
+                                    Salesforce Developers, get ideas, and find
+                                    solutions.
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </dx-popover>
+    </div>
+</template>

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

@@ -0,0 +1,199 @@
+import { api, LightningElement } from "lwc";
+
+const TBID_BASE_URL = "https://dev1-trailblazer-identity.cs192.force.com";
+const TBID_SETTINGS_URL = `${TBID_BASE_URL}/settings`;
+const TBID_PROFILE_URL = `${TBID_BASE_URL}/id`;
+const TBID_API_BASE_URL = "https://development.developer.salesforce.com/tbid";
+const TBID_API_LOGOUT_URL = `${TBID_API_BASE_URL}/logout`;
+const TBID_API_USERINFO_URL = `${TBID_API_BASE_URL}/userinfo`;
+const TBID_API_LOGIN_URL = `${TBID_API_BASE_URL}/dologin`;
+const TBID_API_TOKEN_URL = `${TBID_API_BASE_URL}/token`;
+
+declare global {
+    interface Window {
+        SFIDWidget?: {
+            logout(): void;
+            login(): void;
+            openid_response: any;
+            disabled: boolean;
+        };
+    }
+}
+
+export interface UserInfo {
+    avatarImgSrc?: string;
+    firstName?: string;
+    lastName?: string;
+    username?: string;
+    readonly fullName: string;
+}
+
+export default class AvatarButton extends LightningElement {
+    @api size: "small" | "medium" | "large" = "medium";
+
+    private userInfo: UserInfo = {
+        get fullName() {
+            if (this.firstName && this.lastName) {
+                return `${this.firstName} ${this.lastName}`;
+            }
+            return this.firstName || this.lastName || "";
+        }
+    };
+    private isLoading = false;
+    private settingsUrl = TBID_SETTINGS_URL;
+    private profileUrl = TBID_PROFILE_URL;
+    private _didReceiveUserInfo = false;
+
+    private get loginUrl() {
+        return `${TBID_API_LOGIN_URL}?startURL=${window.encodeURIComponent(
+            window.location.href
+        )}`;
+    }
+
+    private get isLoggedIn() {
+        return this._didReceiveUserInfo;
+    }
+
+    connectedCallback() {
+        if (
+            new URLSearchParams(window.location.search).get("loginSuccess") ===
+            "true"
+        ) {
+            this.isLoading = true;
+        }
+
+        window.addEventListener("tbid-login", this.handleSsoLogin);
+        window.addEventListener("tbid-logout", this.handleSsoLogout);
+
+        const isWidgetDisabled = window.SFIDWidget?.disabled;
+        const isWidgetLoggedIn = window.SFIDWidget?.openid_response;
+
+        // If the component loads and (1) we are logging in and (2) the embedded login widget script
+        // is in the DOM but (3) the widget has either not loaded or not completed login yet, we
+        // defer the userInfo request in order to allow the SFIDWidget the time to trigger it (via
+        // it's own login handler) after SSO login. If any of (1) - (3) are false, then we request
+        // user info immediately. The check prevents duplicate requests.
+        if (
+            this.isLoading &&
+            (!window.SFIDWidget || (!isWidgetDisabled && !isWidgetLoggedIn)) &&
+            document.querySelector('script[src*="authProviderEmbeddedLogin"]')
+        ) {
+            setTimeout(() => {
+                if (!window.SFIDWidget?.openid_response) {
+                    this.requestUserInfo();
+                }
+            }, 1000);
+        } else {
+            this.requestUserInfo();
+        }
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("tbid-login", this.handleSsoLogin);
+        window.removeEventListener("tbid-logout", this.handleSsoLogout);
+    }
+
+    // This handles logout from within this component, rather than from SSO via the SFIDWidget.
+    private handleLogout = (isSsoLogout: boolean) => {
+        this._didReceiveUserInfo = false;
+        this.isLoading = false;
+        this.updateAvatarWithUserInfo({}); // clear old info
+
+        if (!isSsoLogout && window.SFIDWidget?.openid_response) {
+            // If the SFIDWidget is around and has an access token, and if logout was not *already*
+            // triggered by SSO logout, defer to the SFIDWidget. This will ensure that the SSO
+            // session is logged out as well.
+            window.SFIDWidget.logout();
+        } else {
+            // Always clear the session token; if not SSO logout, this will also revoke the token with
+            // TBID; if SSO logout, that step is already taken care of
+            fetch(`${TBID_API_LOGOUT_URL}?isSsoLogout=${isSsoLogout}`); // no need to await this
+            if (!isSsoLogout) {
+                const ifr = document.createElement("iframe");
+                ifr.setAttribute(
+                    "src",
+                    "https://dev1-trailblazer-identity.cs192.force.com/secur/logout.jsp"
+                );
+                document.body.appendChild(ifr);
+            }
+        }
+    };
+
+    // 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);
+
+    private handleComponentLogout = this.handleLogout.bind(this, false);
+
+    // This will only be called for "seamless SSO" login by the embedded login widget (SFIDWidget) on the website, if it exists.
+    private handleSsoLogin = async (event: Event) => {
+        const { userInfo } = (event as CustomEvent).detail;
+        const token = userInfo?.access_token;
+
+        // `token` should always be defined if an SSO login occurs, but we check for extra safety
+        if (token) {
+            this.isLoading = true;
+            // If an SSO login occurred and we have an SSO access token, we want to start using
+            // it rather than some other non-linked access token, for the "seamless SSO"
+            // experience
+            try {
+                await fetch(TBID_API_TOKEN_URL, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify({
+                        token
+                    })
+                });
+            } catch (ex) {
+                console.error(`Attempt to update token failed: ${ex}`);
+            }
+        }
+
+        if (userInfo) {
+            this.updateAvatarWithUserInfo(userInfo);
+            this._didReceiveUserInfo = true;
+        }
+    };
+
+    private handleComponentLogin = () => {
+        if (window.SFIDWidget) {
+            // If the SFIDWidget is around, defer to it for login. This will ensure that the SSO
+            // session is used if possible.
+            window.SFIDWidget.login();
+        } else {
+            window.location.href = this.loginUrl;
+        }
+    };
+
+    private updateAvatarWithUserInfo = (userInfo: any) => {
+        if (!userInfo) {
+            return;
+        }
+
+        this.userInfo.avatarImgSrc = userInfo.photos?.thumbnail;
+        this.userInfo.firstName = userInfo.given_name;
+        this.userInfo.lastName = userInfo.family_name;
+        this.userInfo.username = userInfo.preferred_username;
+        // TODO: Consider displaying initials if no photo. Is there always a photo even if just a default one?
+    };
+
+    private requestUserInfo = async () => {
+        this.isLoading = true;
+
+        try {
+            const userInfoRes = await fetch(TBID_API_USERINFO_URL);
+
+            if (userInfoRes.ok) {
+                const userInfo = await userInfoRes.json();
+                this.updateAvatarWithUserInfo(userInfo);
+                this._didReceiveUserInfo = true;
+            }
+        } catch (ex) {
+            // TODO: Something not directly related to auth went wrong. Unsure what to do here.
+            console.error(`Could not request user info: ${ex}`);
+        }
+
+        this.isLoading = false;
+    };
+}

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -45,7 +45,11 @@ export default class CodeBlock extends LightningElement {
         { label: "PHP", id: "php" },
         { label: "JSON", id: "json" },
         { label: "Swift", id: "swift" },
-        { label: "Kotlin", id: "kotlin" }
+        { label: "Kotlin", id: "kotlin" },
+        { label: "Python", id: "python" },
+        { label: "Bash", id: "bash" },
+        { label: "SQL", id: "sql" },
+        { label: "YAML", id: "yaml" }
     ];
 
     connectedCallback() {

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

@@ -19,6 +19,9 @@
                         onstatechange={handleStateChange}
                     ></dx-header-search>
                 </div>
+                <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/dx/logo/logo.ts

@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
 export default class Logo extends LightningElement {
     @api href: string = "/";
     @api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
-    @api imgAlt: string = "Salesforce log";
+    @api imgAlt: string = "Salesforce logo";
     @api label!: string;
 }

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);
 }