@salesforcedevs/dx-components 0.55.3-alpha-1 → 0.55.3-alpha-4

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "0.55.3-alpha-1",
+    "version": "0.55.3-alpha-4",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -5,6 +5,11 @@
     --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 {
@@ -13,6 +18,8 @@
 }
 
 .avatar.avatar-small {
+    display: block;
+    height: var(--dx-g-spacing-lg);
     width: var(--dx-g-spacing-lg);
 }
 
@@ -22,9 +29,7 @@
 }
 
 .login-control {
-    background: var(--dx-g-cloud-blue-vibrant-90);
-    border-color: var(--dx-g-cloud-blue-vibrant-90);
-    border-radius: 50%;
+    margin-left: var(--dx-g-spacing-smd);
 }
 
 .login-container {

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

@@ -1,30 +1,35 @@
 <template>
-    <div if:false={isLoggedIn}>
+    <div if:true={isLoggedIn}>
         <dx-popover offset="small" width="320px" open-on-hover>
-            <img
-                slot="control"
-                src="https://placekitten.com/300/300"
-                class="avatar avatar-small"
-            />
+            <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={userInfo.avatarImgSrc} class="header-img" />
                     <img
-                        src="https://placekitten.com/300/300"
+                        src="/assets/svg/login-widget-bg.png"
+                        class="header-img"
+                    />
+                    <img
+                        src={userInfo.avatarImgSrc}
                         class="avatar avatar-medium"
                     />
-                    <span class="heading">Jasmine Young</span>
-                    <span class="sub-heading">jyoung58</span>
+                    <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="#" class="inline-link">Logout</a>
+                        -->
+                        <a href="#" onclick={handleLogout} 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="#" class="login-link">
+                                <a href={settingsUrl} class="login-link">
                                     <span class="login-link-label">
                                         Settings
                                     </span>
@@ -36,7 +41,7 @@
                                 </a>
                             </li>
                             <li class="login-list-item">
-                                <a href="#" class="login-link">
+                                <a href={profileUrl} class="login-link">
                                     <span class="login-link-label">
                                         Profile
                                     </span>
@@ -59,7 +64,7 @@
                                     ></dx-icon>
                                 </a>
                                 <div class="login-link-blurb">
-                                    Our Developer Forums have a new home!
+                                    Our Developer Forums have a new home!&nbsp;
                                     <a href="#" class="inline-link">
                                         Learn more
                                     </a>
@@ -71,13 +76,14 @@
             </div>
         </dx-popover>
     </div>
-    <div if:true={isLoggedIn}>
+    <div if:false={isLoggedIn}>
         <dx-popover offset="small" width="320px" open-on-hover>
             <dx-button
-                class="login-control"
                 slot="control"
+                class="login-control"
                 icon-symbol="user"
                 icon-position="left"
+                loading={isLoading}
                 variant="custom"
             >
                 Login
@@ -125,7 +131,7 @@
                         </span>
                         <ul>
                             <li class="login-list-item">
-                                <a href="#" class="login-link">
+                                <a href={loginUrl} class="login-link">
                                     <span class="login-link-label">
                                         Trailblazer.me
                                     </span>

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

@@ -1,34 +1,47 @@
-import { api, LightningElement, track } from "lwc";
+import { api, LightningElement } from "lwc";
 import Cookie from "js-cookie";
-// import oauth2 from "salesforce-oauth2";
 
-// TODO: move to env vars
-// const TBID_CLIENT_ID = '3MVG982oBBDdwyHh3OFdQJTLxbk1dWC8NhBSiKvAsu3gn9m6WhiDKT8iLn34y4w6xsLeIHTbMbhuPPnGfYoW.';
-// const TBID_CLIENT_SECRET = 'FC1B4F3E83746CD6ED3A6356B2FCF671A0470C6ADB88BE1A9F288B2D58400BEA';
-// const TBID_COMMUNITY_URL = 'https://dev1-trailblazer-identity.cs192.force.com';
-const TBID_AUTH_URL = "https://tbid-auth-app-dev.herokuapp.com/tbid/dologin";
-const TBID_USERINFO_URL =
-    "https://dev1-trailblazer-identity.cs192.force.com/services/oauth2/userinfo";
+const TBID_BASE_URL = "https://dev1-trailblazer-identity.cs192.force.com";
+const TBID_LOGIN_URL =
+    "https://development.developer.salesforce.com/tbid/dologin";
+const TBID_LOGOUT_URL = `${TBID_BASE_URL}/services/auth/idp/oidc/logout`;
+const TBID_USERINFO_URL = `${TBID_BASE_URL}/services/oauth2/userinfo`;
+const TBID_REVOKE_URL = `${TBID_BASE_URL}/services/oauth2/revoke`;
 
 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";
 
-    @track
-    private userInfo: UserInfo = {};
-    private _isLoading = false;
-    private _tbidAccessToken: string | undefined;
+    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_BASE_URL}/settings`;
+    private profileUrl = `${TBID_BASE_URL}/id`;
+    private loginUrl = TBID_LOGIN_URL;
+    private logoutUrl = TBID_LOGOUT_URL;
 
+    // A user only counts as logged in for our purposes if they have an access token
+    // and we have successfully used it to get their info.
     private get isLoggedIn() {
-        return Boolean(this._tbidAccessToken);
+        return Boolean(this._tbidAccessToken) && this._didReceiveUserInfo;
     }
 
+    private _didReceiveUserInfo = false;
+    private _tbidAccessToken: string | undefined;
+
     connectedCallback() {
         this._tbidAccessToken = Cookie.get("TBID");
 
@@ -37,42 +50,79 @@ export default class AvatarButton extends LightningElement {
         }
     }
 
-    onLoginClick() {
-        if (!this.isLoggedIn) {
-            window.location.assign(TBID_AUTH_URL);
+    private updateAvatarWithUserInfo(userInfo: any) {
+        if (!userInfo) {
+            return;
         }
-    }
 
-    private updateAvatarWithUserInfo(userInfo: any) {
-        this.userInfo.avatarImgSrc = userInfo?.photos?.thumbnail;
+        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?
     }
 
     private async requestUserInfo(accessToken: string) {
-        this._isLoading = true;
+        this.isLoading = true;
 
         try {
             // FIXME: The TBID userinfo currently only accepts the access token in the URL
             // as a query parameter. This is bad, but they're aware of it, and when it is
             // fixed, we should use a header or something instead.
             const userInfoRes = await fetch(
-                TBID_USERINFO_URL + "?access_token=" + accessToken
+                TBID_USERINFO_URL +
+                    "?access_token=" +
+                    encodeURIComponent(accessToken)
             );
 
             if (userInfoRes.ok) {
                 const userInfo = await userInfoRes.json();
                 this.updateAvatarWithUserInfo(userInfo);
+                this._didReceiveUserInfo = true;
             } else {
                 if (userInfoRes.status === 403) {
-                    // Bad access token; try to refresh the token
+                    const refreshToken = Cookie.get("TBID_REFRESH");
+                    if (refreshToken) {
+                        console.log("Would use refresh token");
+                    }
                 }
+                // TODO: Do we want a "something went wrong" state here?
             }
         } catch (ex) {
             // TODO: Something not directly related to auth went wrong. Unsure what to do here.
         }
 
-        this._isLoading = false;
+        this.isLoading = false;
     }
 
-    private handleAuthFailure() {}
+    // private refreshAccessToken(refreshToken);
+
+    // private handleAuthFailure() {}
+    private async handleLogout() {
+        // TODO: Check for refresh token and invalidate.
+        if (!this._tbidAccessToken) {
+            return;
+        }
+
+        Cookie.remove("TBID");
+        Cookie.remove("TBID_REFRESH");
+
+        const formData = new FormData();
+        formData.append("token", this._tbidAccessToken);
+
+        this.isLoading = true;
+
+        // TODO/QUESTION: should this hit a different or additional URL?
+        await fetch(`${TBID_REVOKE_URL}`, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/x-www-form-urlencoded"
+            },
+            body: formData
+        });
+
+        this._tbidAccessToken = undefined;
+        this._didReceiveUserInfo = false;
+        this.isLoading = false;
+    }
 }