Written by Anonymous
import React, { useState, useEffect, Suspense } from 'react'; import ApiClient from '../common/ApiClient'; import { Table, TableCell, TableContainer, TableRow, TableHead, TableBody, tableCellClasses, Tooltip, Stack, Fab, Divider, Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, Button, TextField, Alert, AlertTitle, } from '@mui/material'; import { Edit, Delete, Add, GetApp } from '@mui/icons-material'; import { styled } from '@mui/material/styles'; const Password = function () { const apiClient = new ApiClient(); const [passwords, setPasswords] = useState(null); const [password, setPassword] = useState({ rowId: '', name: '', value: '' }); const [openDialog, setOpenDialog] = useState(false); const [editMode, setEditmode] = useState(false); const [openDeleteDialog, setOpenDeleteDialog] = useState(false); const [deletePasswordId, setDeletePasswordId] = useState(null); const [passwordValue, setPasswordValue] = useState(null); const [showPasswordAlert, setShowPasswordAlert] = useState(false); const StyledTableCell = styled(TableCell)(({ theme }) => ({ [`&.${tableCellClasses.head}`]: { backgroundColor: theme.palette.common.black, color: theme.palette.common.white, }, [`&.${tableCellClasses.body}`]: { fontSize: 14, }, })); const StyledTableRow = styled(TableRow)(({ theme }) => ({ '&:nth-of-type(odd)': { backgroundColor: theme.palette.action.hover, }, '&:last-child td, &:last-child th': { border: 0, }, })); const addoreditPassword = async function () { let response; if (editMode) { response = await apiClient.put('password', password); setEditmode(false); setPasswordValue(null); } else { response = await apiClient.post('password', password); } if (response.ok) { setOpenDialog(false); setPassword({ rowId: '', name: '', value: '' }); getData(); } else { console.error( `adding password failed with ${response.status} status code` ); } }; const deletePassword = async function () { const response = await apiClient.delete(`password/${deletePasswordId}`); if (response.ok) { setOpenDeleteDialog(false); setPassword({ rowId: '', name: '', value: '' }); getData(); } else { console.error( `adding password failed with ${response.status} status code` ); } }; const getPassword = async function (name, showAlert = true) { const response = await apiClient.get(`password/${name}`, false); setPasswordValue(response); setShowPasswordAlert(showAlert); return response; }; const handleEditClicked = async function (password) { setEditmode(true); const response = await getPassword(password.name, false); password.value = response; setPassword({ rowId: password.rowId, name: password.name, value: password.value, }); setOpenDialog(true); }; const getData = function () { apiClient .get('password/list') .then((data) => { setPasswords(data); }) .catch((error) => { console.error(error); }); }; const handleInputChange = (e) => { const { name, value } = e.target; setPassword((prevData) => ({ ...prevData, [name]: value, })); }; useEffect(() => { getData(); }, []); return ( <Suspense fallback={<div>Loading...</div>}> {passwords && ( <div style={{ marginTop: '2rem' }}> <div style={{ display: 'flex', justifyContent: 'flex-end', padding: '0.2rem', margin: '0.1rem', }} > <Tooltip title="Add"> <Fab size="small" color="secondary" aria-label="add" onClick={() => setOpenDialog(true)} > <Add /> </Fab> </Tooltip> </div> <TableContainer style={{ marginTop: '2rem' }}> <Table className="striped-table"> <TableHead> <StyledTableRow> <StyledTableCell>Row Id</StyledTableCell> <StyledTableCell>Name</StyledTableCell> <StyledTableCell>Actions</StyledTableCell> </StyledTableRow> </TableHead> <TableBody> {passwords.data.map((password) => ( <StyledTableRow key={password.rowId}> <StyledTableCell>{password.rowId}</StyledTableCell> <StyledTableCell>{password.name}</StyledTableCell> <StyledTableCell> <Stack direction="row" spacing={1} alignItems="center"> <Tooltip title="Edit"> <Fab size="small" color="primary" aria-label="edit" onClick={() => handleEditClicked({ rowId: password.rowId, name: password.name, value: '', }) } > <Edit /> </Fab> </Tooltip> <Divider orientation="vertical" flexItem /> <Tooltip title="Delete"> <Fab size="small" color="secondary" aria-label="delete" onClick={() => { setOpenDeleteDialog(true); setDeletePasswordId(password.rowId); }} > <Delete /> </Fab> </Tooltip> <Divider orientation="vertical" flexItem /> <Tooltip title="Get"> <Fab size="small" color="secondary" aria-label="get" onClick={() => getPassword(password.name)} > <GetApp /> </Fab> </Tooltip> </Stack> </StyledTableCell> </StyledTableRow> ))} </TableBody> </Table> </TableContainer> </div> )} <Dialog open={openDialog}> <DialogTitle style={{ cursor: 'move' }} id="add-dialog"> {editMode ? 'Edit Password' : 'Add Password'} </DialogTitle> <DialogContent> <TextField autoFocus required margin="dense" id="rowId" name="rowId" label="row id" type="text" fullWidth variant="outlined" value={password.rowId} onChange={handleInputChange} disabled={editMode} autoComplete="off" /> <TextField required margin="dense" id="name" name="name" label="name" type="text" fullWidth variant="outlined" value={password.name} onChange={handleInputChange} autoComplete="off" /> <TextField required margin="dense" id="value" name="value" label="value" type="text" fullWidth variant="outlined" value={password.value} onChange={handleInputChange} autoComplete="off" /> </DialogContent> <DialogActions> <Button onClick={addoreditPassword}>Save</Button> <Button onClick={() => { setEditmode(false); setPassword({ rowId: '', name: '', value: '' }); setOpenDialog(false); }} > Cancel </Button> </DialogActions> </Dialog> <Dialog open={openDeleteDialog}> <DialogTitle style={{ cursor: 'move' }} id="add-dialog"> Delete Password </DialogTitle> <DialogContent> <DialogContentText> Are you sure you want to delete the Password? </DialogContentText> </DialogContent> <DialogActions> <Button onClick={() => deletePassword()}>Delete</Button> <Button onClick={() => { setOpenDeleteDialog(false); setDeletePasswordId(null); }} > Cancel </Button> </DialogActions> </Dialog> {passwords && showPasswordAlert && <Alert sx={{ marginTop: '2rem' }} open={showPasswordAlert} onClose={() => { setPasswordValue(null); setShowPasswordAlert(false); }} severity={'success'} > <AlertTitle>{'retrieved passwords are displayed below'}</AlertTitle> {passwordValue} </Alert>} </Suspense> ); }; export default Password;