Merge remote-tracking branch 'origin/feature/add-user-management-admin'

Author: MU-Software

apps/pyconkr-admin/src/components/layouts/admin_list.tsx

@@ -21,6 +21,8 @@ import { BackendAdminSignInGuard } from "../elements/admin_signin_guard";
 type AdminListProps = {
   app: string;
   resource: string;
+  hideCreatedAt?: boolean;
+  hideUpdatedAt?: boolean;
 };
 
 type ListRowType = {
@@ -32,7 +34,7 @@ type ListRowType = {
 
 const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
   { fallback: Common.Components.ErrorFallback },
-  Suspense.with({ fallback: <CircularProgress /> }, ({ app, resource }) => {
+  Suspense.with({ fallback: <CircularProgress /> }, ({ app, resource, hideCreatedAt, hideUpdatedAt }) => {
     const navigate = useNavigate();
     const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
     const listQuery = Common.Hooks.BackendAdminAPI.useListQuery<ListRowType>(backendAdminClient, app, resource);
@@ -53,8 +55,8 @@ const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
             <TableRow>
               <TableCell sx={{ width: "25%" }}>ID</TableCell>
               <TableCell sx={{ width: "40%" }}>이름</TableCell>
-              <TableCell sx={{ width: "17.5%" }}>생성 시간</TableCell>
-              <TableCell sx={{ width: "17.5%" }}>수정 시간</TableCell>
+              {hideCreatedAt === true && <TableCell sx={{ width: "17.5%" }}>생성 시간</TableCell>}
+              {hideUpdatedAt === true && <TableCell sx={{ width: "17.5%" }}>수정 시간</TableCell>}
             </TableRow>
           </TableHead>
           <TableBody>
@@ -66,8 +68,8 @@ const InnerAdminList: React.FC<AdminListProps> = ErrorBoundary.with(
                 <TableCell>
                   <Link to={`/${app}/${resource}/${item.id}`}>{item.str_repr}</Link>
                 </TableCell>
-                <TableCell>{new Date(item.created_at).toLocaleString()}</TableCell>
-                <TableCell>{new Date(item.updated_at).toLocaleString()}</TableCell>
+                {hideCreatedAt === true && <TableCell>{new Date(item.created_at).toLocaleString()}</TableCell>}
+                {hideUpdatedAt === true && <TableCell>{new Date(item.updated_at).toLocaleString()}</TableCell>}
               </TableRow>
             ))}
           </TableBody>

apps/pyconkr-admin/src/components/pages/account/sign_in.tsx

@@ -6,9 +6,16 @@ import { useNavigate } from "react-router-dom";
 
 import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
 
+type PageStateType = {
+  userJustSignedIn: boolean;
+};
+
 export const SignInPage: React.FC = () => {
   const navigate = useNavigate();
   const formRef = React.useRef<HTMLFormElement>(null);
+  const [pageState, setPageState] = React.useState<PageStateType>({ userJustSignedIn: false });
+  const setUserJustSignedIn = () => setPageState((ps) => ({ ...ps, userJustSignedIn: true }));
+
   const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
   const signInMutation = Common.Hooks.BackendAdminAPI.useSignInMutation(backendAdminAPIClient);
 
@@ -22,6 +29,7 @@ export const SignInPage: React.FC = () => {
     }>({ form: formRef.current });
     signInMutation.mutate(formData, {
       onSuccess: (data) => {
+        setUserJustSignedIn();
         addSnackbar(`안녕하세요, ${data.username}님!`, "success");
         navigate("/");
       },
@@ -31,13 +39,15 @@ export const SignInPage: React.FC = () => {
 
   React.useEffect(() => {
     (async () => {
+      if (pageState.userJustSignedIn) return;
+
       const userInfo = await Common.BackendAdminAPIs.me(backendAdminAPIClient)();
       if (userInfo) {
         addSnackbar(`이미 ${userInfo.username}님으로 로그인되어 있습니다!`, "success");
         navigate("/");
       }
     })();
-  }, [backendAdminAPIClient, navigate]);
+  }, [backendAdminAPIClient, navigate, pageState.userJustSignedIn]);
 
   return (
     <Stack sx={{ width: "100%", height: "100%", flexGrow: 1 }}>

apps/pyconkr-admin/src/components/pages/user/editor.tsx

@@ -0,0 +1,75 @@
+import * as Common from "@frontend/common";
+import { KeyOff } from "@mui/icons-material";
+import {
+  Button,
+  ButtonProps,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+} from "@mui/material";
+import { ErrorBoundary, Suspense } from "@suspensive/react";
+import * as React from "react";
+import { useParams } from "react-router-dom";
+
+import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar";
+import { AdminEditor } from "../../layouts/admin_editor";
+
+type PageStateType = {
+  isDialogOpen: boolean;
+};
+
+export const AdminUserExtEditor: React.FC = ErrorBoundary.with(
+  { fallback: Common.Components.ErrorFallback },
+  Suspense.with({ fallback: <CircularProgress /> }, () => {
+    const { id } = useParams<{ id?: string }>();
+    const [pageState, setPageState] = React.useState<PageStateType>({ isDialogOpen: false });
+    const openDialog = () => setPageState((ps) => ({ ...ps, isDialogOpen: true }));
+    const closeDialog = () => setPageState((ps) => ({ ...ps, isDialogOpen: false }));
+
+    const backendAdminClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient();
+    const useResetPasswordMutation = Common.Hooks.BackendAdminAPI.useResetUserPasswordMutation(
+      backendAdminClient,
+      id || ""
+    );
+
+    const resetUserPassword = () => {
+      closeDialog();
+      if (id) {
+        useResetPasswordMutation.mutate(undefined, {
+          onSuccess: () => addSnackbar("비밀번호가 초기화되었습니다.", "success"),
+          onError: addErrorSnackbar,
+        });
+      }
+    };
+
+    const resetUserPasswordButton: ButtonProps = {
+      variant: "outlined",
+      color: "error",
+      size: "small",
+      startIcon: <KeyOff />,
+      children: "비밀번호 초기화",
+      onClick: () => id && openDialog(),
+    };
+
+    return (
+      <>
+        <Dialog open={pageState.isDialogOpen}>
+          <DialogTitle>비밀번호 초기화</DialogTitle>
+          <DialogContent>
+            <DialogContentText>정말 이 사용자의 비밀번호를 초기화하시겠습니까?</DialogContentText>
+          </DialogContent>
+          <DialogActions>
+            <Button color="error" onClick={closeDialog} autoFocus>
+              취소
+            </Button>
+            <Button onClick={resetUserPassword}>초기화</Button>
+          </DialogActions>
+        </Dialog>
+        <AdminEditor app="user" resource="userext" id={id} extraActions={[resetUserPasswordButton]} />
+      </>
+    );
+  })
+);

apps/pyconkr-admin/src/routes.tsx

@@ -1,4 +1,4 @@
-import { AccountCircle, AccountTree, Article, FilePresent } from "@mui/icons-material";
+import { AccountCircle, AccountTree, Article, FilePresent, ManageAccounts } from "@mui/icons-material";
 
 import { AdminEditorCreateRoutePage, AdminEditorModifyRoutePage } from "./components/layouts/admin_editor";
 import { AdminList } from "./components/layouts/admin_list";
@@ -8,6 +8,7 @@ import { AccountManagementPage } from "./components/pages/account/manage";
 import { SignInPage } from "./components/pages/account/sign_in";
 import { PublicFileUploadPage } from "./components/pages/file/upload";
 import { AdminCMSPageEditor } from "./components/pages/page/editor";
+import { AdminUserExtEditor } from "./components/pages/user/editor";
 
 export const RouteDefinitions: RouteDef[] = [
   {
@@ -44,9 +45,22 @@ export const RouteDefinitions: RouteDef[] = [
     app: "file",
     resource: "publicfile",
   },
+  {
+    type: "separator",
+    key: "user-separator",
+    title: "사용자",
+  },
   {
     type: "routeDefinition",
     key: "user-userext",
+    icon: ManageAccounts,
+    title: "사용자 관리",
+    app: "user",
+    resource: "userext",
+  },
+  {
+    type: "routeDefinition",
+    key: "user-account",
     icon: AccountCircle,
     title: "로그인 / 로그아웃",
     app: "user",
@@ -78,6 +92,8 @@ export const RegisteredRoutes = {
   "/cms/page/:id": <AdminCMSPageEditor />,
   "/file/publicfile/create": <PublicFileUploadPage />,
   "/file/publicfile/:id": <AdminEditorModifyRoutePage app="file" resource="publicfile" notModifiable notDeletable />,
+  "/user/userext": <AdminList app="user" resource="userext" hideCreatedAt hideUpdatedAt />,
+  "/user/userext/:id": <AdminUserExtEditor />,
   "/account": <AccountRedirectPage />,
   "/account/sign-in": <SignInPage />,
   "/account/manage": <AccountManagementPage />,