Merge pull request #215 from cityofaustin/4798-sg-avatar

Make use of user initials in the account page
cityofaustin · Feb 10, 2021 · 20ab883 · 20ab883
2 parents 53dbb16 + 5505d9b
commit 20ab883
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/moped-editor/src/layouts/DashboardLayout/TopBar.js b/moped-editor/src/layouts/DashboardLayout/TopBar.js
@@ -15,6 +15,7 @@ import MenuIcon from "@material-ui/icons/Menu";
 import { LogOut as LogOutIcon } from "react-feather";
 import Logo from "src/components/Logo";
 import { useUser } from "../../auth/user";
+import emailToInitials from "../../utils/emailToInitials";
 
 const useStyles = makeStyles(() => ({
   root: {},
@@ -27,20 +28,6 @@ const TopBar = ({ className, onMobileNavOpen, ...rest }) => {
   const classes = useStyles();
   const { user, logout } = useUser();
 
-  const emailToInitials = email => {
-    try {
-      const subdomain = "austintexas.gov";
-      if (!email.endsWith(subdomain)) return null;
-      const [first, last] = email
-        .replace("azure_ad", "")
-        .replace(subdomain, "")
-        .split(".");
-      return String(first.charAt(0) + last.charAt(0)).toUpperCase();
-    } catch {
-      return null;
-    }
-  };
-
   return (
     <AppBar className={clsx(classes.root, className)} elevation={0} {...rest}>
       <Toolbar>

diff --git a/moped-editor/src/utils/emailToInitials.js b/moped-editor/src/utils/emailToInitials.js
@@ -0,0 +1,14 @@
+export default email => {
+  try {
+    const subdomain = "austintexas.gov";
+    if (!email.endsWith(subdomain)) return null;
+    const [first, last] = email
+      .replace("azure_ad", "")
+      .replace(subdomain, "")
+      .split(".");
+
+    return String(first.charAt(0) + last.charAt(0)).toUpperCase();
+  } catch {
+    return null;
+  }
+};
diff --git a/moped-editor/src/views/account/AccountView/Profile.js b/moped-editor/src/views/account/AccountView/Profile.js
@@ -13,6 +13,7 @@ import {
   makeStyles,
 } from "@material-ui/core";
 import { useUser } from "../../../auth/user";
+import emailToInitials from "../../../utils/emailToInitials";
 
 const useStyles = makeStyles(() => ({
   root: {},
@@ -21,6 +22,9 @@ const useStyles = makeStyles(() => ({
     width: 100,
     marginBottom: 8,
   },
+  userInitials: {
+    fontSize: "2rem",
+  }
 }));
 
 const Profile = ({ className, ...rest }) => {
@@ -36,7 +40,11 @@ const Profile = ({ className, ...rest }) => {
               className={classes.avatar}
               src={user?.userAvatar}
               style={{ "background-color": user?.userColor }}
-            />
+            >
+              <Typography className={classes.userInitials}>
+                {emailToInitials(user?.attributes?.email)}
+              </Typography>
+            </Avatar>
           </Box>
           <Typography color="textPrimary" gutterBottom variant="h3">
             {String(user?.userName ?? user?.attributes?.email).toLowerCase()}