From be82b3dd082a750a540ee126ae7c9402aa0b41b2 Mon Sep 17 00:00:00 2001
From: Ian Krieger <iandkrieger@gmail.com>
Date: Mon, 7 Aug 2023 17:08:33 -0400
Subject: [PATCH] feat: add user profile

---
 src/auth/views/Login.tsx                    |   2 +-
 src/auth/views/MagicLink.tsx                |   2 +-
 src/components/AppBar/LandingPageAppBar.tsx |   1 -
 src/components/Drawer/MiniSideBar.tsx       |  60 +++++++++--
 src/components/Navigation/DraftMenu.tsx     |  28 +++--
 src/components/Navigation/Navbar.tsx        |   7 +-
 src/components/Steps/ActionButtons.tsx      |   8 +-
 src/theme.tsx                               |   8 ++
 src/user/hooks/useGenerateApiKey.tsx        |  45 ++++++++
 src/user/settings/NewKeyPairModal.tsx       |  13 +--
 src/user/settings/Settings.tsx              |  60 ++++++-----
 src/user/settings/UserApiKey.tsx            | 112 ++++++++++++++++++++
 src/user/settings/UserForm.tsx              |   4 +-
 src/user/views/user/Profile.tsx             |  16 +--
 14 files changed, 289 insertions(+), 77 deletions(-)
 create mode 100644 src/user/hooks/useGenerateApiKey.tsx
 create mode 100644 src/user/settings/UserApiKey.tsx

diff --git a/src/auth/views/Login.tsx b/src/auth/views/Login.tsx
index 450892da..63b8da9b 100644
--- a/src/auth/views/Login.tsx
+++ b/src/auth/views/Login.tsx
@@ -45,7 +45,7 @@ export function Login() {
         color="primary"
         size="large"
         variant="contained"
-        sx={{ mt: 2, textTransform: "none", mb: 1 }}
+        sx={{ mt: 2, mb: 1 }}
         disabled={loading}
         loading={loading}
         onClick={() => {
diff --git a/src/auth/views/MagicLink.tsx b/src/auth/views/MagicLink.tsx
index c5a1337a..500edd2c 100644
--- a/src/auth/views/MagicLink.tsx
+++ b/src/auth/views/MagicLink.tsx
@@ -66,7 +66,7 @@ export function MagicLink() {
         color="primary"
         size="large"
         variant="contained"
-        sx={{ mt: 2, textTransform: "none", mb: 1 }}
+        sx={{ mt: 2, mb: 1 }}
         disabled={loading}
         loading={loading}
         onClick={() => {
diff --git a/src/components/AppBar/LandingPageAppBar.tsx b/src/components/AppBar/LandingPageAppBar.tsx
index 820258c8..544f9a96 100644
--- a/src/components/AppBar/LandingPageAppBar.tsx
+++ b/src/components/AppBar/LandingPageAppBar.tsx
@@ -97,7 +97,6 @@ function AuthedButton(props: { isAuthenticated?: boolean }) {
     <Button
       variant="outlined"
       size="large"
-      sx={{ textTransform: "none" }}
       href={!props.isAuthenticated ? "/auth/link" : undefined}
       onClick={props.isAuthenticated ? () => signOut() : undefined}
     >
diff --git a/src/components/Drawer/MiniSideBar.tsx b/src/components/Drawer/MiniSideBar.tsx
index 7d11cf5d..468c1f2c 100644
--- a/src/components/Drawer/MiniSideBar.tsx
+++ b/src/components/Drawer/MiniSideBar.tsx
@@ -3,13 +3,14 @@ import Box from "@mui/material/Box";
 import Toolbar from "@mui/material/Toolbar";
 import CssBaseline from "@mui/material/CssBaseline";
 import Divider from "@mui/material/Divider";
-import { Button, Drawer, Typography } from "@mui/material";
+import { Button, Drawer, Typography, SvgIcon } from "@mui/material";
 import { PropsWithChildren } from "react";
 import CampaignOutlinedIcon from "@mui/icons-material/CampaignOutlined";
 import AccountBalanceOutlinedIcon from "@mui/icons-material/AccountBalanceOutlined";
 import AccountBoxOutlinedIcon from "@mui/icons-material/AccountBoxOutlined";
 import HeadsetMicOutlinedIcon from "@mui/icons-material/HeadsetMicOutlined";
 import InsertPhotoOutlinedIcon from "@mui/icons-material/InsertPhotoOutlined";
+import LightbulbOutlinedIcon from "@mui/icons-material/LightbulbOutlined";
 
 type RouteOption = {
   label: string;
@@ -24,18 +25,45 @@ export default function MiniSideBar({ children }: PropsWithChildren) {
     {
       label: "Campaigns",
       href: "/user/main/campaign",
-      icon: <CampaignOutlinedIcon fontSize="large" />,
+      icon: (
+        <CampaignOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
+    },
+    // Possible future enhancements, not visible to user but help keep spacing
+    {
+      label: "Creatives",
+      href: "/user/main/creatives",
+      icon: (
+        <LightbulbOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
+      disabled: true,
     },
     {
       label: "Assets",
       href: "/user/main/assets",
-      icon: <InsertPhotoOutlinedIcon fontSize="large" />,
+      icon: (
+        <InsertPhotoOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
       disabled: true,
     },
     {
       label: "Audiences",
       href: "/user/main/audiences",
-      icon: <CampaignOutlinedIcon fontSize="large" />,
+      icon: (
+        <CampaignOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
       disabled: true,
     },
   ];
@@ -44,17 +72,32 @@ export default function MiniSideBar({ children }: PropsWithChildren) {
     {
       label: "Account",
       href: "/user/main/settings",
-      icon: <AccountBalanceOutlinedIcon fontSize="large" />,
+      icon: (
+        <AccountBalanceOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
     },
     {
       label: "Profile",
       href: "/user/main/profile",
-      icon: <AccountBoxOutlinedIcon fontSize="large" />,
+      icon: (
+        <AccountBoxOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
     },
     {
       label: "Support",
       href: "mailto:selfserve@brave.com",
-      icon: <HeadsetMicOutlinedIcon fontSize="large" />,
+      icon: (
+        <HeadsetMicOutlinedIcon
+          fontSize="large"
+          sx={{ color: "rgba(161, 171, 186, 1)" }}
+        />
+      ),
     },
   ];
 
@@ -101,7 +144,6 @@ const ItemBox = (props: RouteOption) => {
       href={props.href}
       disabled={props.disabled}
       sx={{
-        textTransform: "none",
         padding: "15px 6px 15px 6px",
         borderRadius: "0px",
         gap: "8px",
@@ -114,7 +156,7 @@ const ItemBox = (props: RouteOption) => {
         alignItems="center"
       >
         {props.icon}
-        <Typography>{props.label}</Typography>
+        <Typography color="rgba(63, 72, 85, 1)">{props.label}</Typography>
       </Box>
     </Box>
   );
diff --git a/src/components/Navigation/DraftMenu.tsx b/src/components/Navigation/DraftMenu.tsx
index 33525f66..226d27d5 100644
--- a/src/components/Navigation/DraftMenu.tsx
+++ b/src/components/Navigation/DraftMenu.tsx
@@ -2,7 +2,14 @@ import * as React from "react";
 import { useContext, useState } from "react";
 
 import { useHistory } from "react-router-dom";
-import { Badge, IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
+import {
+  Badge,
+  Button,
+  IconButton,
+  Menu,
+  MenuItem,
+  Tooltip,
+} from "@mui/material";
 import DraftsIcon from "@mui/icons-material/Drafts";
 import { DraftContext } from "state/context";
 
@@ -18,15 +25,16 @@ export function DraftMenu() {
 
   return (
     <>
-      <Tooltip title="Local Campaign Drafts">
-        <span>
-          <IconButton disabled={drafts.length === 0} onClick={handleClick}>
-            <Badge color="primary" badgeContent={drafts.length}>
-              <DraftsIcon fontSize="medium" />
-            </Badge>
-          </IconButton>
-        </span>
-      </Tooltip>
+      <Button
+        disabled={drafts.length === 0}
+        onClick={handleClick}
+        sx={{ pr: 3 }}
+        endIcon={
+          <Badge color="primary" badgeContent={drafts.length} sx={{ ml: 1 }} />
+        }
+      >
+        Campaign Drafts
+      </Button>
       <Menu open={open} anchorEl={anchorEl} onClose={() => setAnchorEl(null)}>
         <MenuItem
           disabled
diff --git a/src/components/Navigation/Navbar.tsx b/src/components/Navigation/Navbar.tsx
index 53bda376..d8119674 100644
--- a/src/components/Navigation/Navbar.tsx
+++ b/src/components/Navigation/Navbar.tsx
@@ -58,12 +58,7 @@ export function Navbar() {
             New Campaign
           </Button>
         )}
-        <Button
-          variant="outlined"
-          size="medium"
-          sx={{ textTransform: "none" }}
-          onClick={() => signOut()}
-        >
+        <Button variant="outlined" size="medium" onClick={() => signOut()}>
           Sign out
         </Button>
       </Toolbar>
diff --git a/src/components/Steps/ActionButtons.tsx b/src/components/Steps/ActionButtons.tsx
index 009fce71..527a9ca2 100644
--- a/src/components/Steps/ActionButtons.tsx
+++ b/src/components/Steps/ActionButtons.tsx
@@ -12,18 +12,14 @@ export function ActionButtons() {
 
   return (
     <Stack mt={3} spacing={2} mr={1}>
-      <Button
-        size="small"
-        sx={{ textTransform: "none" }}
-        onClick={() => history.push("/user/main")}
-      >
+      <Button size="small" onClick={() => history.push("/user/main")}>
         Return to dashboard
       </Button>
       {values.draftId !== undefined && (
         <Button
           size="small"
           color="error"
-          sx={{ textTransform: "none", mr: 1 }}
+          sx={{ mr: 1 }}
           onClick={() => {
             localStorage.removeItem(values.draftId!);
             setDrafts();
diff --git a/src/theme.tsx b/src/theme.tsx
index 1936af79..c313239e 100644
--- a/src/theme.tsx
+++ b/src/theme.tsx
@@ -33,6 +33,7 @@ export const theme = createTheme({
       styleOverrides: {
         root: {
           borderRadius: "1000px",
+          textTransform: "none",
         },
       },
     },
@@ -44,5 +45,12 @@ export const theme = createTheme({
         },
       },
     },
+    MuiContainer: {
+      styleOverrides: {
+        root: {
+          marginLeft: 0,
+        },
+      },
+    },
   },
 });
diff --git a/src/user/hooks/useGenerateApiKey.tsx b/src/user/hooks/useGenerateApiKey.tsx
new file mode 100644
index 00000000..f8819d0e
--- /dev/null
+++ b/src/user/hooks/useGenerateApiKey.tsx
@@ -0,0 +1,45 @@
+import { buildAdServerV2Endpoint } from "util/environment";
+import { useCallback, useState } from "react";
+
+export function useGenerateApiKey() {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState<string>();
+  const [error, setError] = useState<string>();
+
+  const generate = useCallback((advertiserId: string) => {
+    setLoading(true);
+    createKey(advertiserId)
+      .then((res) => {
+        setData(res);
+      })
+      .catch((error) => {
+        setError(error.message);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return { generate, data, loading, error };
+}
+
+async function createKey(advertiserId: string): Promise<string> {
+  const res = await fetch(buildAdServerV2Endpoint("/auth/api-key"), {
+    method: "POST",
+    mode: "cors",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    credentials: "include",
+    body: JSON.stringify({
+      advertiserId,
+    }),
+  });
+
+  if (res.status !== 200) {
+    throw new Error("cannot create key");
+  }
+
+  const { apiKey } = await res.json();
+  return apiKey;
+}
diff --git a/src/user/settings/NewKeyPairModal.tsx b/src/user/settings/NewKeyPairModal.tsx
index 9a2a7c2b..17d58937 100644
--- a/src/user/settings/NewKeyPairModal.tsx
+++ b/src/user/settings/NewKeyPairModal.tsx
@@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 import { useUpdateAdvertiserMutation } from "graphql/advertiser.generated";
 import * as tweetnacl from "tweetnacl";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { IAdvertiser } from "auth/context/auth.interface";
 import { CardContainer } from "components/Card/CardContainer";
 
@@ -34,7 +34,8 @@ interface Props {
 
 export function NewKeyPairModal({ advertiser }: Props) {
   const [saving, setSaving] = useState(false);
-  const [publicKey, setPublicKey] = useState(advertiser.publicKey);
+  const publicKey = useRef<string | null>();
+  publicKey.current = advertiser.publicKey;
   const [newPublicKey, setNewPublicKey] = useState("");
   const [newPrivateKey, setNewPrivateKey] = useState("");
   const [privateKey, setPrivateKey] = useState("");
@@ -46,11 +47,11 @@ export function NewKeyPairModal({ advertiser }: Props) {
     variables: {
       updateAdvertiserInput: {
         id: advertiser.id,
-        publicKey: publicKey,
+        publicKey: publicKey.current,
       },
     },
     onCompleted() {
-      setPublicKey(newPublicKey);
+      publicKey.current = newPublicKey;
       setPrivateKey("");
       setNewPrivateKey("");
       closeNewKeypairModal();
@@ -105,11 +106,11 @@ export function NewKeyPairModal({ advertiser }: Props) {
           used to decrypt and view conversion data.
         </Typography>
 
-        {publicKey !== "" && (
+        {publicKey.current !== "" && (
           <Box marginTop={1}>
             <Typography>Your organization's public key:</Typography>
             <Box component="pre" marginY={0}>
-              {publicKey}
+              {publicKey.current}
             </Box>
           </Box>
         )}
diff --git a/src/user/settings/Settings.tsx b/src/user/settings/Settings.tsx
index 56b98007..5d042194 100644
--- a/src/user/settings/Settings.tsx
+++ b/src/user/settings/Settings.tsx
@@ -16,7 +16,7 @@ import { setActiveAdvertiser } from "auth/util";
 import { CardContainer } from "components/Card/CardContainer";
 import { DraftContext } from "state/context";
 import { NewKeyPairModal } from "user/settings/NewKeyPairModal";
-import { DashboardButton } from "components/Button/DashboardButton";
+import MiniSideBar from "components/Drawer/MiniSideBar";
 
 const Settings = () => {
   const { advertiser: activeAdvertiser, advertisers } = useAdvertiser();
@@ -26,6 +26,7 @@ const Settings = () => {
   const setActiveAdvertiserWithId = (e: SelectChangeEvent) => {
     const id = e.target.value;
     const adv = _.find(advertisers, { id });
+    console.log(adv);
 
     if (adv) {
       setAdvertiser(adv);
@@ -35,36 +36,37 @@ const Settings = () => {
   };
 
   return (
-    <Container>
-      <DashboardButton />
-      <Stack spacing={2} mt={1}>
-        <NewKeyPairModal advertiser={advertiser} />
+    <MiniSideBar>
+      <Container>
+        <Stack spacing={2} mt={1}>
+          <NewKeyPairModal advertiser={advertiser} />
 
-        <CardContainer header="Organization">
-          <Typography>
-            You may have access to multiple organisations. Switch between them
-            here.
-          </Typography>
+          <CardContainer header="Organization">
+            <Typography>
+              You may have access to multiple organisations. Switch between them
+              here.
+            </Typography>
 
-          <Box sx={{ mt: 2 }}>
-            <FormControl fullWidth>
-              <InputLabel>Select Organization</InputLabel>
-              <Select
-                value={advertiser.id}
-                label="Select Organization"
-                onChange={(e) => setActiveAdvertiserWithId(e)}
-              >
-                {advertisers.map((a) => (
-                  <MenuItem key={a.id} value={a.id}>
-                    {a.name}
-                  </MenuItem>
-                ))}
-              </Select>
-            </FormControl>
-          </Box>
-        </CardContainer>
-      </Stack>
-    </Container>
+            <Box sx={{ mt: 2 }}>
+              <FormControl fullWidth>
+                <InputLabel>Select Organization</InputLabel>
+                <Select
+                  value={advertiser.id}
+                  label="Select Organization"
+                  onChange={(e) => setActiveAdvertiserWithId(e)}
+                >
+                  {advertisers.map((a) => (
+                    <MenuItem key={a.id} value={a.id}>
+                      {a.name}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Box>
+          </CardContainer>
+        </Stack>
+      </Container>
+    </MiniSideBar>
   );
 };
 
diff --git a/src/user/settings/UserApiKey.tsx b/src/user/settings/UserApiKey.tsx
new file mode 100644
index 00000000..4c0cd807
--- /dev/null
+++ b/src/user/settings/UserApiKey.tsx
@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import { CardContainer } from "components/Card/CardContainer";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Link,
+  Typography,
+} from "@mui/material";
+import { LoadingButton } from "@mui/lab";
+import { useAdvertiser } from "auth/hooks/queries/useAdvertiser";
+import { useGenerateApiKey } from "user/hooks/useGenerateApiKey";
+import ContentCopyOutlinedIcon from "@mui/icons-material/ContentCopyOutlined";
+
+export function UserApiKey() {
+  const { advertiser } = useAdvertiser();
+  const { generate, data, loading } = useGenerateApiKey();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <CardContainer header="Profile API Key">
+      <Typography>
+        API keys are used to get data from the reporting endpoints. They are
+        unique to you.
+      </Typography>
+
+      <div style={{ margin: "10px" }} />
+
+      <Typography>
+        Documentation can be found{" "}
+        <Link
+          href="https://github.com/brave/ads-ui/wiki/Brave-Ads-Advertiser-API-Guide"
+          underline="none"
+        >
+          here
+        </Link>{" "}
+        on how to use the API.
+      </Typography>
+
+      <div style={{ margin: "10px" }} />
+
+      <Button onClick={() => setOpen(true)} variant="contained" size="large">
+        Generate API Key
+      </Button>
+
+      <Dialog open={open} onClose={() => setOpen(false)} maxWidth="lg">
+        <DialogTitle>
+          {data ? "New API Key" : "Generate a new API key?"}
+        </DialogTitle>
+        <DialogContent>
+          {!data && (
+            <DialogContentText>
+              Generating a new API key will result in the deactivation of your
+              previous key, rendering it unusable for future requests. Make sure
+              to update your code with the new key to avoid disruptions in your
+              application's functionality.
+            </DialogContentText>
+          )}
+          {data && (
+            <Box>
+              <DialogContentText>
+                This key is unique to you, make sure to safely store it and
+                avoid sharing it with others to prevent unauthorized access.
+              </DialogContentText>
+              <Box
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                component={Typography}
+                bgcolor="#ededed"
+                borderRadius={"16px"}
+                mt={1}
+                padding={1}
+              >
+                {data}
+                <IconButton
+                  onClick={() =>
+                    window.navigator.clipboard
+                      .writeText(data)
+                      .then(() => alert("Key copied"))
+                  }
+                  sx={{ ml: 1 }}
+                >
+                  <ContentCopyOutlinedIcon />
+                </IconButton>
+              </Box>
+            </Box>
+          )}
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setOpen(false)}>
+            {data ? "Close" : "Cancel"}
+          </Button>
+          {!data && (
+            <LoadingButton
+              disabled={loading}
+              loading={loading}
+              onClick={() => generate(advertiser.id)}
+            >
+              Generate
+            </LoadingButton>
+          )}
+        </DialogActions>
+      </Dialog>
+    </CardContainer>
+  );
+}
diff --git a/src/user/settings/UserForm.tsx b/src/user/settings/UserForm.tsx
index 9a0db58f..b7f945b5 100644
--- a/src/user/settings/UserForm.tsx
+++ b/src/user/settings/UserForm.tsx
@@ -14,7 +14,7 @@ export function UserForm() {
   const [initialVals, setInitialVals] = useState(user);
 
   if (!user.userId) {
-    const details = "Unable to get user information";
+    const details = "Unable to get profile information";
     return <ErrorDetail error={details} additionalDetails={details} />;
   }
 
@@ -25,7 +25,7 @@ export function UserForm() {
   });
 
   return (
-    <CardContainer header="User Details">
+    <CardContainer header="Profile Details">
       <Formik
         enableReinitialize
         initialValues={initialVals}
diff --git a/src/user/views/user/Profile.tsx b/src/user/views/user/Profile.tsx
index f438c248..8d08c2e1 100644
--- a/src/user/views/user/Profile.tsx
+++ b/src/user/views/user/Profile.tsx
@@ -1,13 +1,17 @@
 import { Container } from "@mui/material";
 import { UserForm } from "user/settings/UserForm";
-import { DashboardButton } from "components/Button/DashboardButton";
+import { UserApiKey } from "user/settings/UserApiKey";
+import MiniSideBar from "components/Drawer/MiniSideBar";
 
 export function Profile() {
   return (
-    <Container>
-      <div style={{ marginTop: "10px" }} />
-      <DashboardButton />
-      <UserForm />
-    </Container>
+    <MiniSideBar>
+      <Container>
+        <div style={{ marginTop: "10px" }} />
+        <UserForm />
+        <div style={{ marginBottom: "40px" }} />
+        <UserApiKey />
+      </Container>
+    </MiniSideBar>
   );
 }