Display More Profile Information

src/webextension/background/accounts/index.js

@@ -72,6 +72,8 @@ export const AUTHENTICATED = "authenticated";
 
 export const APP_KEY_NAME = "https://identity.mozilla.com/apps/lockbox";
 
+export const DEFAULT_AVATAR_PATH = "icons/default-avatar.svg";
+
 export class Account {
   constructor({config = DEFAULT_CONFIG, info}) {
     // TODO: verify configuration (when there is one)
@@ -112,6 +114,12 @@ export class Account {
 
   get uid() { return (this.info && this.info.uid) || undefined; }
   get email() { return (this.info && this.info.email) || undefined; }
+  get displayName() { return (this.info && this.info.displayName) || this.email; }
+  get avatar() {
+    return (this.info && this.info.avatar) ||
+           browser.extension.getURL(DEFAULT_AVATAR_PATH);
+  }
+
   get keys() { return (this.info && this.info.keys) || new Map(); }
 
   async signIn(action = "signin") {
@@ -181,6 +189,8 @@ export class Account {
     this.info = {
       uid: userInfo.uid,
       email: userInfo.email,
+      displayName: userInfo.displayName,
+      avatar: userInfo.avatar,
       access_token: oauthInfo.access_token,
       expires_at: (Date.now() / 1000) + oauthInfo.expires_in,
       refresh_token: oauthInfo.refresh_token,
@@ -202,6 +212,8 @@ export class Account {
       mode: this.mode,
       uid: this.uid,
       email: this.email,
+      displayName: this.displayName,
+      avatar: this.avatar,
     };
   }
 }

src/webextension/list/manage/components/account-summary-label.css

@@ -5,3 +5,8 @@
 .account-summary {
   font-size: 15px;
 }
+
+.account-summary img {
+  height: 40px;
+  vertical-align: middle;
+}

src/webextension/list/manage/components/account-summary-label.js

@@ -7,16 +7,17 @@ import React from "react";
 
 import styles from "./account-summary-label.css";
 
-export default function AccountSummaryLabel({email}) {
-  if (!email) {
+export default function AccountSummaryLabel({displayName, avatar}) {
+  if (!displayName) {
     return null;
   }
 
   return (
-    <span className={styles.accountSummary}>{email}</span>
+    <span className={styles.accountSummary}><img src={avatar} /> {displayName}</span>
   );
 }
 
 AccountSummaryLabel.propTypes = {
-  email: PropTypes.string,
+  displayName: PropTypes.string,
+  avatar: PropTypes.string,
 };

src/webextension/list/manage/containers/account-summary.js

@@ -11,6 +11,8 @@ export default connect(
     if (state.account.mode === "authenticated") {
       return {
         email: state.account.email,
+        displayName: state.account.displayName,
+        avatar: state.account.avatar,
       };
     }
     return {};

test/unit/background/accounts-test.js

@@ -112,6 +112,8 @@ describe("background > accounts", () => {
     const authedInfo = {
       ...unauthedInfo,
       email: "[email protected]",
+      displayName: "Ellen Ripley",
+      avatar: "https://avatars.example/92397b7d8b9e510f4266ab9751030c73b3b12cfc.png",
       refresh_token: "rmrBzLYi2zia4ExNBy7uXE4s_Da_HMS4d3tvr203OVTq1EMQqh-85m4Hejo3TKBKuont6QFIlLJ23rZR4xqZBA",
       expires_at: 1825884426240000,
       keys: new Map(),
@@ -181,6 +183,42 @@ describe("background > accounts", () => {
       expect(acct.email).to.equal("[email protected]");
     });
 
+    it("displayName", () => {
+      expect(acct.displayName).to.equal(undefined);
+      acct.info = { ...authedInfo };
+      expect(acct.displayName).to.equal("Ellen Ripley");
+      delete acct.info.displayName;
+      expect(acct.displayName).to.equal("[email protected]");
+    });
+
+    it("avatar", () => {
+      expect(acct.avatar).to.equal(browser.extension.getURL(accounts.DEFAULT_AVATAR_PATH));
+      acct.info = authedInfo;
+      expect(acct.avatar).to.equal("https://avatars.example/92397b7d8b9e510f4266ab9751030c73b3b12cfc.png");
+    });
+
+    it("details", () => {
+      let actual;
+
+      actual = acct.details();
+      expect(actual).to.deep.equal({
+        mode: accounts.GUEST,
+        uid: undefined,
+        email: undefined,
+        displayName: undefined,
+        avatar: browser.extension.getURL(accounts.DEFAULT_AVATAR_PATH),
+      });
+      acct.info = authedInfo;
+      actual = acct.details();
+      expect(actual).to.deep.equal({
+        mode: accounts.AUTHENTICATED,
+        uid: "1234",
+        email: "[email protected]",
+        displayName: "Ellen Ripley",
+        avatar: "https://avatars.example/92397b7d8b9e510f4266ab9751030c73b3b12cfc.png",
+      });
+    });
+
     describe("signin/out", () => {
       let stubWAF;
 
@@ -245,6 +283,8 @@ describe("background > accounts", () => {
           body: {
             uid: "1234",
             email: "[email protected]",
+            displayName: "Ellen Ripley",
+            avatar: "https://avatars.example/92397b7d8b9e510f4266ab9751030c73b3b12cfc.png",
           },
         });
 

test/unit/background/message-ports-test.js

@@ -121,6 +121,8 @@ describe("background > message ports", () => {
         mode: "guest",
         uid: undefined,
         email: undefined,
+        displayName: undefined,
+        avatar: browser.extension.getURL(accounts.DEFAULT_AVATAR_PATH),
       },
     });
   });

test/unit/list/manage/components/account-summary-label-test.js

@@ -14,10 +14,12 @@ chai.use(chaiEnzyme());
 describe("list > manage > components > <AccountSummaryLabel />", () => {
   it("render <AccountSummaryLabel/>", () => {
     const wrapper = mountWithL10n(
-      <AccountSummaryLabel email="[email protected]"/>
+      <AccountSummaryLabel displayName="Ellen Ripley"
+        avatar="https://avatar.example/c49fd653afb7010bd47d5ef81a95d3977803517d.png"/>
     );
 
-    expect(wrapper.find("span")).to.have.text("[email protected]");
+    expect(wrapper.find("span")).to.have.text(" Ellen Ripley");
+    expect(wrapper.find("img")).to.have.prop("src").to.equal("https://avatar.example/c49fd653afb7010bd47d5ef81a95d3977803517d.png");
   });
 
   it("render nothing", () => {

test/unit/list/manage/containers/account-summary-test.js

@@ -25,6 +25,8 @@ describe("list > manage > containers > <AccountSummary/>", () => {
         mode: "authenticated",
         uid: "1234",
         email: "[email protected]",
+        displayName: "Ellen Ripley",
+        avatar: "https://avatar.example/c49fd653afb7010bd47d5ef81a95d3977803517d.png",
       },
     });
     const wrapper = mountWithL10n(
@@ -33,7 +35,8 @@ describe("list > manage > containers > <AccountSummary/>", () => {
       </Provider>
     );
 
-    expect(wrapper.find("span")).to.have.text("[email protected]");
+    expect(wrapper.find("span")).to.have.text(" Ellen Ripley");
+    expect(wrapper.find("img")).to.have.prop("src").to.equal("https://avatar.example/c49fd653afb7010bd47d5ef81a95d3977803517d.png");
   });
   it("render empty in guest mode", () => {
     const store = mockStore(initialState);