vodorod/parcer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: better ui

Browse Source
This commit is contained in:
karishmas6
2024-10-03 03:29:38 +05:30
parent 40aea4c8a6
commit dfd7097c77
1 changed files with 10 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/organisms/ApiKey.tsx
View File

@@ -9,7 +9,7 @@ import {
Tooltip, Tooltip,
CircularProgress, CircularProgress,
} from '@mui/material'; } from '@mui/material';
import { Visibility, VisibilityOff, ContentCopy } from '@mui/icons-material'; import { ContentCopy } from '@mui/icons-material';
import styled from 'styled-components'; import styled from 'styled-components';
import axios from 'axios'; import axios from 'axios';
import { useGlobalInfoStore } from '../../context/globalInfo'; import { useGlobalInfoStore } from '../../context/globalInfo';
@@ -31,10 +31,9 @@ const HiddenText = styled(Typography)`
font-style: italic; font-style: italic;
`; `;
const ApiKey = () => { const ApiKeyManager = () => {
const [apiKey, setApiKey] = useState<string | null>(null); const [apiKey, setApiKey] = useState<string | null>(null);
const [loading, setLoading] = useState<boolean>(true); const [loading, setLoading] = useState<boolean>(true);
const [showKey, setShowKey] = useState<boolean>(false);
const [copySuccess, setCopySuccess] = useState<boolean>(false); const [copySuccess, setCopySuccess] = useState<boolean>(false);
const { notify } = useGlobalInfoStore(); const { notify } = useGlobalInfoStore();
@@ -44,7 +43,6 @@ const ApiKey = () => {
try { try {
const { data } = await axios.get('http://localhost:8080/auth/api-key'); const { data } = await axios.get('http://localhost:8080/auth/api-key');
setApiKey(data.api_key); setApiKey(data.api_key);
notify('info', `Fetc API Key: ${data.api_key}`);
} catch (error) { } catch (error) {
console.error('Error fetching API key', error); console.error('Error fetching API key', error);
} finally { } finally {
@@ -60,7 +58,7 @@ const ApiKey = () => {
try { try {
const { data } = await axios.post('http://localhost:8080/auth/generate-api-key'); const { data } = await axios.post('http://localhost:8080/auth/generate-api-key');
setApiKey(data.api_key); setApiKey(data.api_key);
notify('info', `Genrate API Key: ${data.api_key}`); notify('info', `Generated API Key: ${data.api_key}`);
} catch (error) { } catch (error) {
console.error('Error generating API key', error); console.error('Error generating API key', error);
} finally { } finally {
@@ -76,10 +74,6 @@ const ApiKey = () => {
} }
}; };
const toggleShowKey = () => {
setShowKey(!showKey);
};
if (loading) return <CircularProgress />; if (loading) return <CircularProgress />;
return ( return (
@@ -91,29 +85,22 @@ const ApiKey = () => {
<ApiKeyField <ApiKeyField
label="Your API Key" label="Your API Key"
variant="outlined" variant="outlined"
type={showKey ? 'text' : 'password'} value="**** **** **** ****"
value={apiKey}
InputProps={{ InputProps={{
readOnly: true, readOnly: true,
endAdornment: ( endAdornment: (
<InputAdornment position="end"> <InputAdornment position="end">
<IconButton onClick={toggleShowKey} edge="end"> <IconButton onClick={copyToClipboard} edge="end">
{showKey ? <VisibilityOff /> : <Visibility />} <ContentCopy />
</IconButton> </IconButton>
</InputAdornment> </InputAdornment>
), ),
}} }}
/> />
<Button onClick={copyToClipboard} variant="contained" color="primary"> {copySuccess && <Tooltip title="Copied!" open={copySuccess} placement="right">
Copy to Clipboard <Typography variant="caption" color="primary">Copied to Clipboard</Typography>
</Button> </Tooltip>}
{copySuccess && (
<Tooltip title="Copied!" open={copySuccess}>
<span></span>
</Tooltip>
)}
</> </>
) : ( ) : (
<> <>
@@ -127,4 +114,4 @@ const ApiKey = () => {
); );
}; };
export default ApiKey; export default ApiKeyManager;