closeServer dialog added

web/src/App/Sidebar.jsx

@@ -1,4 +1,4 @@
-import { playlistAllHost, shutdownHost } from 'utils/Hosts'
+import { playlistAllHost } from 'utils/Hosts'
 import Divider from '@material-ui/core/Divider'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
@@ -8,12 +8,9 @@ import RemoveAll from 'components/RemoveAll'
 import SettingsDialog from 'components/Settings'
 import AboutDialog from 'components/About'
 import UploadDialog from 'components/Upload'
-import {
+import { CreditCard as CreditCardIcon, List as ListIcon } from '@material-ui/icons'
-  CreditCard as CreditCardIcon,
-  List as ListIcon,
-  PowerSettingsNew as PowerSettingsNewIcon,
-} from '@material-ui/icons'
 import List from '@material-ui/core/List'
+import CloseServer from 'components/CloseServer'
 
 import { AppSidebarStyle } from './style'
 
@@ -37,12 +34,7 @@ export default function Sidebar({ isDrawerOpen, setIsDonationDialogOpen }) {
       <List>
         <SettingsDialog />
         <AboutDialog />
-        <ListItem button key='Close server' onClick={() => fetch(shutdownHost())}>
+        <CloseServer />
-          <ListItemIcon>
-            <PowerSettingsNewIcon />
-          </ListItemIcon>
-          <ListItemText primary='Close server' />
-        </ListItem>
       </List>
 
       <Divider />

web/src/components/CloseServer.jsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import { Button, Dialog, DialogActions, DialogTitle, ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
+import { PowerSettingsNew as PowerSettingsNewIcon } from '@material-ui/icons'
+import { shutdownHost } from 'utils/Hosts'
+
+export default function CloseServer() {
+  const [open, setOpen] = useState(false)
+  const closeDialog = () => setOpen(false)
+  const openDialog = () => setOpen(true)
+
+  return (
+    <>
+      <ListItem button key='Close server' onClick={openDialog}>
+        <ListItemIcon>
+          <PowerSettingsNewIcon />
+        </ListItemIcon>
+
+        <ListItemText primary='Close server' />
+      </ListItem>
+
+      <Dialog open={open} onClose={closeDialog}>
+        <DialogTitle>Close server?</DialogTitle>
+        <DialogActions>
+          <Button variant='outlined' onClick={closeDialog} color='primary'>
+            Cancel
+          </Button>
+
+          <Button
+            variant='contained'
+            onClick={() => {
+              fetch(shutdownHost())
+              closeDialog()
+            }}
+            color='primary'
+            autoFocus
+          >
+            Ok
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  )
+}