From f53bef0bf432a1eeac000e29bd2424dd42ca4039 Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Sat, 20 Jul 2024 13:14:31 +0200
Subject: [PATCH] Create Key settings component

---
 .../Settings/components/Key/Key.jsx           | 41 +++++++++++++++++++
 .../Settings/components/Key/index.js          |  1 +
 2 files changed, 42 insertions(+)
 create mode 100644 dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/Key.jsx
 create mode 100644 dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/index.js

diff --git a/dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/Key.jsx b/dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/Key.jsx
new file mode 100644
index 0000000..6f60e5a
--- /dev/null
+++ b/dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/Key.jsx
@@ -0,0 +1,41 @@
+import {Box, Button, Stack, TextField, Typography} from "@mui/material";
+import {CopyAll, Refresh, Key as KeyIcon} from "@mui/icons-material";
+import {useContext} from "react";
+import {ProjectContext} from "@/states/Dashboard/contexts/Project";
+import {postRequest} from "@/common/utils/RequestUtil.js";
+
+export const Key = () => {
+    const {currentProject, updateProjects} = useContext(ProjectContext);
+
+    const copyKey = () => {
+        navigator.clipboard.writeText(currentProject.validationKey);
+    }
+
+    const regenerateKey = async () => {
+        try {
+            await postRequest(`/project/${currentProject.id}/regenerate`);
+            await updateProjects();
+        } catch (e) {
+            console.error(e.message);
+        }
+
+    }
+
+    return (
+        <Box sx={{border: 1, borderColor: 'divider', borderRadius: 1.5, p: 2.5, width: {xs: "100%", lg: "33%"}}}>
+            <Typography variant="h5" fontWeight={700}>Validation key</Typography>
+            <Typography variant="body1" color="text.secondary" fontWeight={500}>
+                Verification keys can be used for client-side projects. They are only used to confirm
+                licenses and have no other special rights
+            </Typography>
+            <TextField sx={{mt: 1.5}} variant="outlined" fullWidth size="small"
+                       value={currentProject.validationKey}
+                       InputProps={{startAdornment: <KeyIcon sx={{color: 'text.secondary', mr: 1}}/>}}/>
+
+            <Stack direction="row" sx={{mt: 1.5}} gap={1}>
+                <Button variant="contained" color="primary" startIcon={<Refresh/>} onClick={regenerateKey}>Regenerate key</Button>
+                <Button variant="contained" color="primary" startIcon={<CopyAll/>} onClick={copyKey}>Copy</Button>
+            </Stack>
+        </Box>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/index.js b/dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/index.js
new file mode 100644
index 0000000..2e8a4c8
--- /dev/null
+++ b/dashboard/src/states/Dashboard/pages/Info/components/Settings/components/Key/index.js
@@ -0,0 +1 @@
+export {Key as default} from "./Key.jsx";
\ No newline at end of file