From 675841157a726c08019731125f89709118d71b32 Mon Sep 17 00:00:00 2001
From: Aditya <60684641+0x0elliot@users.noreply.github.com>
Date: Mon, 12 Feb 2024 23:39:36 +0530
Subject: [PATCH] fix: making settings UI look better

---
 frontend/src/views/SettingsPage.jsx | 65 +++++++++++++++++++++++++++--
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/SettingsPage.jsx b/frontend/src/views/SettingsPage.jsx
index 2b0c1ebd..be99104c 100755
--- a/frontend/src/views/SettingsPage.jsx
+++ b/frontend/src/views/SettingsPage.jsx
@@ -13,6 +13,11 @@ import {
 //import { useAlert
 import { ToastContainer, toast } from "react-toastify" 
 
+import { FileCopy, Visibility, VisibilityOff } from "@mui/icons-material";
+import IconButton from "@mui/material/IconButton";
+import { Tooltip } from "@mui/material";
+
+
 const Settings = (props) => {
   const { globalUrl, isLoaded, userdata, setUserData } = props;
   //const alert = useAlert();
@@ -44,6 +49,17 @@ const Settings = (props) => {
 
   const [userSettings, setUserSettings] = useState({});
 
+  const [showApiKey, setShowApiKey] = useState(false);
+  const [apiKeyCopied, setApiKeyCopied] = useState(false);
+
+  const handleCopyApiKey = () => {
+    navigator.clipboard.writeText(userSettings.apikey);
+    setApiKeyCopied(true);
+    setTimeout(() => {
+      setApiKeyCopied(false);
+    }, 2000);
+  }
+
   /*
 	const [userdata.eth_info, setEthInfo] = useState(userdata.eth_info !== undefined && userdata.eth_info.account !== undefined && userdata.eth_info.account.length > 0 ? userdata.eth_info : {
 		"account": "",
@@ -467,7 +483,7 @@ const Settings = (props) => {
         >
           What is the API key used for?
         </a>
-        <TextField
+        {/* <TextField
           style={{ backgroundColor: theme.palette.inputColor, flex: "1" }}
           InputProps={{
             style: {
@@ -484,7 +500,43 @@ const Settings = (props) => {
           id="standard-required"
           margin="normal"
           variant="outlined"
-        />
+        /> */}
+        <TextField
+        style={{ backgroundColor: theme.palette.inputColor, flex: "1" }}
+        InputProps={{
+          style: {
+            height: "50px",
+            color: "white",
+          },
+          endAdornment: (
+            <>
+            <Tooltip title={showApiKey ? "Hide API Key" : "Show API Key"}>
+              <IconButton
+                onClick={() => setShowApiKey(!showApiKey)}
+              >
+                {showApiKey ? <VisibilityOff /> : <Visibility />}
+              </IconButton>
+            </Tooltip>
+            <Tooltip title={apiKeyCopied ? "API Key copied!" : "Copy API Key"}>
+              <IconButton
+                onClick={handleCopyApiKey}
+              >
+                <FileCopy />
+              </IconButton>
+            </Tooltip>
+          </>
+          ),
+        }}
+        color="primary"
+        value={showApiKey ? userSettings.apikey : '*'.repeat(36)} // Show API key if showApiKey is true, else show asterisks
+        required
+        disabled
+        fullWidth
+        placeholder="APIKEY"
+        id="standard-required"
+        margin="normal"
+        variant="outlined"
+      />
         <Button
           style={{ width: "100%", height: "40px", marginTop: "10px" }}
           variant="outlined"
@@ -676,8 +728,13 @@ const Settings = (props) => {
           Submit password change
         </Button>
         <h3>{passwordFormMessage}</h3>
-        <Divider style={{ marginTop: "40px" }} />
-        <h2>Creator Incentive Program</h2>
+        {isCloud && (
+          <>
+            <Divider style={{ marginTop: "40px" }} />
+            <h2>Creator Incentive Program</h2>
+          </>
+        )}
+
         <div style={{ display: runFlex ? "flex" : "", width: "100%" }}>
 			<div>
 			{isCloud ?