From 8a8be0b0856fd51aba1aa79fa59c9a0d31f35d52 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sat, 28 Jan 2023 15:34:45 +0800
Subject: [PATCH] =?UTF-8?q?feat(admin):=20=E5=A2=9E=E5=8A=A0=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E8=AF=A6=E6=83=85=E9=A1=B5=EF=BC=8C=E5=B9=B6=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=87=8D=E7=BD=AE=E5=AF=86=E7=A0=81=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 server/admin/app/ra/App.tsx                   |  4 +-
 .../app/ra/components/ButtonWithConfirm.tsx   | 45 +++++++++++++++
 .../admin/app/ra/components/DangerButton.tsx  | 17 ++++++
 server/admin/app/ra/resources/user.tsx        | 55 ++++++++++++++++++-
 4 files changed, 118 insertions(+), 3 deletions(-)
 create mode 100644 server/admin/app/ra/components/ButtonWithConfirm.tsx
 create mode 100644 server/admin/app/ra/components/DangerButton.tsx

diff --git a/server/admin/app/ra/App.tsx b/server/admin/app/ra/App.tsx
index 558895c2..ca26be60 100644
--- a/server/admin/app/ra/App.tsx
+++ b/server/admin/app/ra/App.tsx
@@ -1,7 +1,7 @@
 import { Admin, Resource, ShowGuesser, CustomRoutes } from 'react-admin';
 import jsonServerProvider from 'ra-data-json-server';
 import { authProvider } from './authProvider';
-import { UserList } from './resources/user';
+import { UserList, UserShow } from './resources/user';
 import React from 'react';
 import { GroupList, GroupShow } from './resources/group';
 import { MessageList } from './resources/chat';
@@ -41,7 +41,7 @@ export const App = () => (
       name="users"
       options={{ label: '用户管理' }}
       list={UserList}
-      show={ShowGuesser}
+      show={UserShow}
     />
     <Resource
       icon={MessageIcon}
diff --git a/server/admin/app/ra/components/ButtonWithConfirm.tsx b/server/admin/app/ra/components/ButtonWithConfirm.tsx
new file mode 100644
index 00000000..5b14e8bd
--- /dev/null
+++ b/server/admin/app/ra/components/ButtonWithConfirm.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+import { Button, ButtonProps, Confirm } from 'react-admin';
+
+interface Props extends Pick<ButtonProps, 'label'> {
+  component?: React.ComponentType<ButtonProps>;
+  confirmTitle?: string;
+  confirmContent?: string;
+  onConfirm?: () => void;
+}
+export const ButtonWithConfirm: React.FC<Props> = React.memo((props) => {
+  const {
+    component: ButtonComponent = Button,
+    confirmTitle = '确认要进行该操作么？',
+    confirmContent = '该操作不可撤回',
+  } = props;
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <>
+      <ButtonComponent
+        onClick={(e) => {
+          setOpen(true);
+        }}
+        label={props.label}
+      />
+      <Confirm
+        isOpen={open}
+        loading={loading}
+        title={confirmTitle}
+        content={confirmContent}
+        onConfirm={() => {
+          setLoading(true);
+          props.onConfirm?.();
+          setLoading(false);
+          setOpen(false);
+        }}
+        onClose={() => {
+          setOpen(false);
+        }}
+      />
+    </>
+  );
+});
+ButtonWithConfirm.displayName = 'ButtonWithConfirm';
diff --git a/server/admin/app/ra/components/DangerButton.tsx b/server/admin/app/ra/components/DangerButton.tsx
new file mode 100644
index 00000000..0b563a52
--- /dev/null
+++ b/server/admin/app/ra/components/DangerButton.tsx
@@ -0,0 +1,17 @@
+import { styled, alpha } from '@mui/material';
+import { Button } from 'react-admin';
+
+export const DangerButton = styled(Button, {
+  name: 'DangerBtn',
+  overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+  color: theme.palette.error.main,
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.error.main, 0.12),
+    // Reset on mouse devices
+    '@media (hover: none)': {
+      backgroundColor: 'transparent',
+    },
+  },
+}));
+DangerButton.displayName = 'DangerButton';
diff --git a/server/admin/app/ra/resources/user.tsx b/server/admin/app/ra/resources/user.tsx
index 070aa911..710e8d23 100644
--- a/server/admin/app/ra/resources/user.tsx
+++ b/server/admin/app/ra/resources/user.tsx
@@ -6,12 +6,18 @@ import {
   List,
   TextField,
   ShowButton,
-  EditButton,
   SearchInput,
   ImageField,
+  Show,
+  SimpleShowLayout,
+  TopToolbar,
+  useUpdate,
+  useShowContext,
 } from 'react-admin';
 import React from 'react';
 import { Box } from '@mui/material';
+import { DangerButton } from '../components/DangerButton';
+import { ButtonWithConfirm } from '../components/ButtonWithConfirm';
 
 const PostListActionToolbar = ({ children, ...props }) => (
   <Box sx={{ alignItems: 'center', display: 'flex' }}>{children}</Box>
@@ -49,3 +55,50 @@ export const UserList: React.FC = () => (
   </List>
 );
 UserList.displayName = 'UserList';
+
+const UserShowActions: React.FC = () => {
+  const [update] = useUpdate();
+  const { record, refetch, resource } = useShowContext();
+
+  return (
+    <TopToolbar>
+      {/* <EditButton /> */}
+
+      <ButtonWithConfirm
+        component={DangerButton}
+        label="重置密码"
+        confirmContent="重置密码后密码变为: 123456789, 请及时修改密码"
+        onConfirm={async () => {
+          await update(resource, {
+            id: record.id,
+            data: {
+              password:
+                '$2a$10$eSebpg0CEvsbDC7j1NxB2epMUkYwKhfT8vGdPQYkfeXYMqM8HjnpW', // 123456789
+            },
+          });
+          await refetch();
+        }}
+      />
+    </TopToolbar>
+  );
+};
+UserShowActions.displayName = 'UserShowActions';
+
+export const UserShow: React.FC = () => (
+  <Show actions={<UserShowActions />}>
+    <SimpleShowLayout>
+      <TextField source="id" />
+      <DateField source="createdAt" />
+      <EmailField source="email" />
+      <TextField source="password" />
+      <TextField source="nickname" />
+      <TextField source="discriminator" />
+      <BooleanField source="temporary" />
+      <TextField source="avatar" />
+      <TextField source="type" />
+      <DateField source="updatedAt" />
+      <BooleanField source="settings.messageListVirtualization" />
+    </SimpleShowLayout>
+  </Show>
+);
+UserShow.displayName = 'UserShow';