Add confirmation when deleting user

ui/src/i18n/en.json

@@ -241,7 +241,9 @@
         "transcodingDisabled": "Changing the transcoding configuration through the web interface is disabled for security reasons. If you would like to change (edit or add) transcoding options, restart the server with the %{config} configuration option.",
         "transcodingEnabled": "Navidrome is currently running with %{config}, making it possible to run system commands from the transcoding settings using the web interface. We recommend to disable it for security reasons and only enable it when configuring Transcoding options.",
         "songsAddedToPlaylist": "Added 1 song to playlist |||| Added %{smart_count} songs to playlist",
-        "noPlaylistsAvailable": "None available"
+        "noPlaylistsAvailable": "None available",
+        "delete_user_title": "Delete user '%{name}'",
+        "delete_user_content": "Are you sure you want to delete this user and all their data (including playlists and preferences)?"
     },
     "menu": {
         "library": "Library",

ui/src/user/DeleteUserButton.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import DeleteIcon from '@material-ui/icons/Delete'
+import { makeStyles } from '@material-ui/core/styles'
+import { fade } from '@material-ui/core/styles/colorManipulator'
+import classnames from 'classnames'
+import { useDeleteWithConfirmController, Button, Confirm } from 'react-admin'
+
+const useStyles = makeStyles(
+  (theme) => ({
+    deleteButton: {
+      color: theme.palette.error.main,
+      '&:hover': {
+        backgroundColor: fade(theme.palette.error.main, 0.12),
+        // Reset on mouse devices
+        '@media (hover: none)': {
+          backgroundColor: 'transparent',
+        },
+      },
+    },
+  }),
+  { name: 'RaDeleteWithConfirmButton' }
+)
+
+const DeleteUserButton = (props) => {
+  const {
+    resource,
+    record,
+    basePath,
+    redirect = 'list',
+    className,
+    onClick,
+    ...rest
+  } = props
+  const {
+    open,
+    loading,
+    handleDialogOpen,
+    handleDialogClose,
+    handleDelete,
+  } = useDeleteWithConfirmController({
+    resource,
+    record,
+    redirect,
+    basePath,
+    onClick,
+  })
+
+  const classes = useStyles(props)
+  return (
+    <>
+      <Button
+        onClick={handleDialogOpen}
+        label="ra.action.delete"
+        className={classnames(
+          'ra-delete-button',
+          classes.deleteButton,
+          className
+        )}
+        key="button"
+        {...rest}
+      >
+        <DeleteIcon />
+      </Button>
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        title="message.delete_user_title"
+        content="message.delete_user_content"
+        translateOptions={{
+          name: record.name,
+        }}
+        onConfirm={handleDelete}
+        onClose={handleDialogClose}
+      />
+    </>
+  )
+}
+
+export default DeleteUserButton

ui/src/user/UserEdit.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { makeStyles } from '@material-ui/core/styles'
 import {
   TextInput,
   BooleanInput,
@@ -9,17 +10,35 @@ import {
   email,
   SimpleForm,
   useTranslate,
+  Toolbar,
+  SaveButton,
 } from 'react-admin'
 import { Title } from '../common'
+import DeleteUserButton from './DeleteUserButton'
+
+const useStyles = makeStyles({
+  toolbar: {
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+})
 
 const UserTitle = ({ record }) => {
   const translate = useTranslate()
   const resourceName = translate('resources.user.name', { smart_count: 1 })
   return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
+
+const UserToolbar = (props) => (
+  <Toolbar {...props} classes={useStyles()}>
+    <SaveButton />
+    <DeleteUserButton />
+  </Toolbar>
+)
+
 const UserEdit = (props) => (
   <Edit title={<UserTitle />} {...props}>
-    <SimpleForm>
+    <SimpleForm toolbar={<UserToolbar />}>
       <TextInput source="userName" validate={[required()]} />
       <TextInput source="name" validate={[required()]} />
       <TextInput source="email" validate={[email()]} />

ui/src/user/UserList.js

@@ -25,6 +25,7 @@ const UserList = (props) => {
       {...props}
       sort={{ field: 'userName', order: 'ASC' }}
       exporter={false}
+      bulkActionButtons={false}
       filters={<UserFilter />}
     >
       {isXsmall ? (