diff --git a/moped-editor/src/layouts/DashboardLayout/TopBar.js b/moped-editor/src/layouts/DashboardLayout/TopBar.js index 01972a91c2..72a3bf07e1 100644 --- 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 ( diff --git a/moped-editor/src/utils/emailToInitials.js b/moped-editor/src/utils/emailToInitials.js new file mode 100644 index 0000000000..c5ef4bd255 --- /dev/null +++ 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 index 6710e9762b..9d29f2aaf8 100644 --- 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 }} - /> + > + + {emailToInitials(user?.attributes?.email)} + + {String(user?.userName ?? user?.attributes?.email).toLowerCase()}