diff --git a/components/elements/tokens/index.tsx b/components/elements/tokens/index.tsx
new file mode 100644
index 0000000..a22a12d
--- /dev/null
+++ b/components/elements/tokens/index.tsx
@@ -0,0 +1,115 @@
+import styles from './styles.module.css'
+import {Autocomplete, IconButton, TextareaAutosize, TextField} from "@mui/material";
+import {useContext, useEffect, useState} from "react";
+import Context from "../../../context/token";
+import AddCircleOutlineOutlinedIcon from '@mui/icons-material/AddCircleOutlineOutlined';
+import DeleteForeverOutlined from '@mui/icons-material/DeleteForeverOutlined';
+import Modal from '@mui/material/Modal';
+import Fade from '@mui/material/Fade';
+import Backdrop from '@mui/material/Backdrop';
+import Box from '@mui/material/Box';
+import Grid from "@mui/material/Grid";
+import ConfirmDialog from "../confirm-dialog";
+
+const style = {
+ position: 'absolute' as 'absolute',
+ top: '50%',
+ left: '50%',
+ transform: 'translate(-50%, -50%)',
+ width: '100%',
+ bgcolor: 'background.paper',
+ border: '2px solid #000',
+ boxShadow: 24,
+ p: 4,
+};
+
+export default function Tokens() {
+ const {token, tokens, addToken, deleteToken} = useContext(Context)
+ const [value, setValue] = useState('')
+ const [showAddForm, setShowAddForm] = useState(false)
+ const [showConfirm, setShowConfirm] = useState(false)
+
+ let variants = tokens.map((token, index) => ({
+ ...token,
+ label: token.host
+ }));
+
+ useEffect(() => {
+ setShowAddForm(!token)
+ }, [token])
+
+ console.log('token34344', token);
+ return (
+ <>
+
+
+ {
+ console.log('newValue', newValue);
+ setValue(newValue || '');
+ }}
+ disablePortal
+ options={variants}
+ renderInput={(params) => }
+ />
+
+
+ setShowAddForm(true)} title={`Add new token`}
+ aria-label="Add new token">
+
+
+ setShowConfirm(true)} title={`Delete current token`}
+ aria-label="Add new token">
+
+
+
+
+ setShowAddForm(false)}
+ closeAfterTransition
+ slots={{backdrop: Backdrop}}
+ slotProps={{
+ backdrop: {
+ timeout: 500,
+ },
+ }}
+ >
+
+
+ {
+ if (addToken(event.target.value)) {
+ setShowAddForm(false)
+ }
+ }}
+ />
+
+
+
+ {
+ let tokenId = token?.id || null
+ if (tokenId) {
+ deleteToken(tokenId)
+ }
+ setShowConfirm(false)
+ }}
+
+ closeCallback={() => {setShowConfirm(false)}}>
+ Confirm?
+
+ >
+ )
+}
diff --git a/pages/index.tsx b/pages/index.tsx
index f887cd2..b2cdbf9 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,11 +1,12 @@
import Head from 'next/head'
import styles from '../styles/Home.module.css'
import Processes from "../components/elements/processes";
-import {Tabs, Tab, MenuItem, Select, InputLabel, TextareaAutosize, Button} from '@mui/material';
-import {useContext, useEffect, useState} from "react";
+import {Tabs, Tab} from '@mui/material';
+import {useContext, useState} from "react";
import Commands from "../components/elements/commands";
import {Provider as TabProvider} from '../context/tab'
import Context from "../context/token";
+import Tokens from "../components/elements/tokens";
export enum TabEnum {
@@ -14,42 +15,10 @@ export enum TabEnum {
}
export default function Home() {
- let {token, tokens, addToken} = useContext(Context)
+ let {token} = useContext(Context)
const [tab, setTab] = useState(TabEnum.Processes);
const handleChange = (event: any, tab: number) => setTab(tab)
- // useEffect(() => {
- // const storedToken = grabToken()
- // setToken(storedToken)
- // const storedTokens = grabTokens()
- // setTokens(storedTokens)
- // }, [])
-
- let onTokenInput = (event: any) => {
-
- }
-
- if (!token) {
- return (
- <>
-
- System monitoring
-
-
-
-
-
- Для дальнейшей работы добавьте JWT токен
- addToken(event.target.value)}
- />
-
- >
- )
- }
-
return (
<>
@@ -59,28 +28,7 @@ export default function Home() {
- {tokens.length > 0 && <>
- Tokens
-
- >}
-
+
{token && <>