feat: generate api key

src/components/organisms/ApiKey.tsx

@@ -1,9 +1,135 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Button,
+  TextField,
+  Typography,
+  IconButton,
+  InputAdornment,
+  Tooltip,
+  CircularProgress,
+} from '@mui/material';
+import { Visibility, VisibilityOff, ContentCopy } from '@mui/icons-material';
+import styled from 'styled-components';
+import axios from 'axios';
+import { useGlobalInfoStore } from '../../context/globalInfo';
+
+// Styled components
+const Container = styled(Box)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 50px;
+`;
+
+const ApiKeyField = styled(TextField)`
+  width: 400px;
+  margin: 20px 0;
+`;
+
+const HiddenText = styled(Typography)`
+  color: #888;
+  font-style: italic;
+`;
 
 const ApiKey = () => {
-  return (
+  const [apiKey, setApiKey] = useState<string | null>(null);
-    <div>ApiKey</div>
+  const [loading, setLoading] = useState<boolean>(true);
-  )
+  const [showKey, setShowKey] = useState<boolean>(false);
-}
+  const [copySuccess, setCopySuccess] = useState<boolean>(false);
 
-export default ApiKey
+  const {notify} = useGlobalInfoStore();
+
+  // Fetch API Key on mount
+  useEffect(() => {
+    const fetchApiKey = async () => {
+      try {
+        const { data } = await axios.get('http://localhost:8080/auth/api-key');
+        setApiKey(data.api_key);
+        notify('info', `Fetc API Key: ${data.api_key}`);
+      } catch (error) {
+        console.error('Error fetching API key', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchApiKey();
+  }, []);
+
+  // Handle API Key generation
+  const generateApiKey = async () => {
+    setLoading(true);
+    try {
+      const { data } = await axios.post('http://localhost:8080/auth/generate-api-key');
+      setApiKey(data.api_key);
+      notify('info', `Genrate API Key: ${data.api_key}`);
+    } catch (error) {
+      console.error('Error generating API key', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Copy to clipboard handler
+  const copyToClipboard = () => {
+    if (apiKey) {
+      navigator.clipboard.writeText(apiKey);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    }
+  };
+
+  // Toggle key visibility
+  const toggleShowKey = () => {
+    setShowKey(!showKey);
+  };
+
+  if (loading) return <CircularProgress />;
+
+  return (
+    <Container>
+      <Typography variant="h5">Manage Your API Key</Typography>
+
+      {apiKey ? (
+        <>
+          <ApiKeyField
+            label="Your API Key"
+            variant="outlined"
+            type={showKey ? 'text' : 'password'}
+            value={apiKey}
+            InputProps={{
+              readOnly: true,
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton onClick={toggleShowKey} edge="end">
+                    {showKey ? <VisibilityOff /> : <Visibility />}
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+          />
+
+          <Button onClick={copyToClipboard} variant="contained" color="primary">
+            Copy to Clipboard
+          </Button>
+
+          {copySuccess && (
+            <Tooltip title="Copied!" open={copySuccess}>
+              <span></span>
+            </Tooltip>
+          )}
+        </>
+      ) : (
+        <>
+          <HiddenText>You haven't generated an API key yet.</HiddenText>
+          <Button onClick={generateApiKey} variant="contained" color="primary">
+            Generate API Key
+          </Button>
+        </>
+      )}
+    </Container>
+  );
+};
+
+export default ApiKey;