@salesforcedevs/dx-components 1.2.2-avatar-button-6 → 1.2.3

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

@@ -1,347 +0,0 @@
-import { api, LightningElement } from "lwc";
-import Cookies from 'js-cookie';
-import { track } from "dxUtils/analytics";
-
-// TODO: move to environment variable
-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_IFRAME_URL = `${TBID_BASE_URL}/secur/logout.jsp`;
-// TODO: move to environment variable
-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`;
-const TBID_API_PLATFORM_EVENTS_URL = `${TBID_API_BASE_URL}/platform-events`;
-
-declare global {
-    interface Window {
-        SFIDWidget?: {
-            logout(): void;
-            login(): void;
-            openid_response: any;
-            disabled: boolean;
-        };
-    }
-}
-
-export interface UserInfo {
-    avatarImgSrc?: string;
-    company?: string;
-    firstName?: string;
-    id?: string;
-    lastName?: string;
-    orgId?: string;
-    relationship?: string;
-    role?: string;
-    username?: string;
-    readonly fullName: string;
-}
-
-interface EventSourceEvent extends Event {
-    id: string;
-    retry?: number;
-    data: string;
-    event?: string;
-}
-
-const enum PlatformEventsType {
-    UserDataChange = "UserDataChange",
-    UserPhotoChange = "UserPhotoChange",
-    UserMerge = "UserMerge"
-}
-
-const trackableUserInfo = new Set([
-    "company",
-    "id",
-    "orgId",
-    "relationship",
-    "role"
-]);
-
-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 eventSource?: EventSource;
-    private _hasRendered = false;
-    private _didReceiveUserInfo = false;
-
-    private get loginUrl() {
-        return `${TBID_API_LOGIN_URL}?startURL=${encodeURIComponent(
-            window.location.href
-        )}`;
-    }
-
-    private get isLoggedIn() {
-        return this._didReceiveUserInfo;
-    }
-
-    connectedCallback() {
-        const isLoginSuccessRedirect = Cookies.get('tbidLoginSuccess') === 'true';
-
-        if (isLoginSuccessRedirect) {
-            this.isLoading = true;
-            Cookies.remove('tbidLoginSuccess'); // cleanup
-        }
-
-        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.trackLogin(); TODO: track only clicks
-                    this.requestUserInfo();
-                }
-            }, 1000);
-        } else {
-            if (this.isLoading) {
-                // This was a login.
-                // this.trackLogin(); TODO: track only clicks
-            }
-            this.requestUserInfo();
-        }
-    }
-
-    disconnectedCallback() {
-        window.removeEventListener("tbid-login", this.handleSsoLogin);
-        window.removeEventListener("tbid-logout", this.handleSsoLogout);
-        this.teardownEventSource();
-    }
-
-    private handleUserDataChange = ({ data }: EventSourceEvent) => {
-        let parsedEventData: any;
-
-        try {
-            parsedEventData = JSON.parse(data);
-        } catch (ex) {
-            console.error(
-                `Unparseable ${PlatformEventsType.UserDataChange} data received`
-            );
-            return;
-        }
-
-        this.updateAvatarWithUserInfo(parsedEventData);
-    };
-
-    private setupEventSource = () => {
-        // subscribe to platform events
-        this.eventSource = new EventSource(TBID_API_PLATFORM_EVENTS_URL);
-        this.eventSource.addEventListener(
-            PlatformEventsType.UserDataChange,
-            // eslint-disable-next-line no-undef
-            this.handleUserDataChange as EventListener
-        );
-        this.eventSource.addEventListener(
-            PlatformEventsType.UserPhotoChange,
-            this.requestUserInfo
-        );
-        this.eventSource.addEventListener(
-            PlatformEventsType.UserMerge,
-            this.handleSsoLogout
-        );
-    };
-
-    private teardownEventSource = () => {
-        if (!this.eventSource) {
-            return;
-        }
-
-        this.eventSource.removeEventListener(
-            PlatformEventsType.UserDataChange,
-            // eslint-disable-next-line no-undef
-            this.handleUserDataChange as EventListener
-        );
-        this.eventSource.removeEventListener(
-            PlatformEventsType.UserPhotoChange,
-            this.requestUserInfo
-        );
-        this.eventSource.removeEventListener(
-            PlatformEventsType.UserMerge,
-            this.handleSsoLogout
-        );
-        this.eventSource.close();
-        this.eventSource = undefined;
-    };
-
-    private platformEventsSubscribe = () => {
-        this.teardownEventSource();
-        this.setupEventSource();
-    };
-
-    // 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
-        this.teardownEventSource();
-
-        if (!isSsoLogout) {
-            this.trackLogout();
-        }
-
-        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) {
-                // Dropping an iframe is required to fully get TBID to destroy the session; this is
-                // a TBID issue and they have requested that we do this for now.
-                const ifr = document.createElement("iframe");
-                ifr.setAttribute("src", TBID_IFRAME_URL);
-                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
-                    })
-                });
-                this.platformEventsSubscribe();
-            } catch (ex) {
-                console.error(`Attempt to update token failed: ${ex}`);
-            }
-        }
-
-        if (userInfo) {
-            this.updateAvatarWithUserInfo(userInfo);
-            this._didReceiveUserInfo = true;
-        }
-
-        // this.trackLogin(); TODO: only track clicks
-    };
-
-    private handleComponentLogin = () => {
-        // Either of these methods will trigger a redirect, so we track the successful login after
-        // the redirect completes, and not here.
-        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 trackLogin = () => {
-        track(document, "custEv_userLogin", {
-            authenticationMethod: "tbid",
-            id: {
-                tb: Object.entries(this.userInfo)
-                    .filter(([key]) => trackableUserInfo.has(key))
-                    .reduce(
-                        (infoToTrack, [key, value]) => ({
-                            ...infoToTrack,
-                            [key]: value
-                        }),
-                        {} as Record<string, string>
-                    )
-            }
-        });
-    };
-
-    private trackLogout = () => {
-        track(document, "custEv_userLogout", {
-            clickText: "logout",
-            clickUrl: TBID_API_LOGOUT_URL,
-            itemTitle: "TBID Logout Link",
-            elementType: "link"
-        });
-    };
-
-    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;
-        this.userInfo.id = userInfo.user_id;
-        this.userInfo.orgId = userInfo.organization_id;
-
-        if (userInfo.custom_attributes) {
-            this.userInfo.company = userInfo.custom_attributes.CompanyName;
-            this.userInfo.relationship =
-                userInfo.custom_attributes.RelationshipToSalesforce;
-            this.userInfo.role = userInfo.custom_attributes.Role;
-        }
-        // 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) {
-                if (!this.eventSource) {
-                    this.setupEventSource();
-                }
-                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;
-    };
-}