|
| 1 | +import * as Common from "@frontend/common"; |
| 2 | +import { Logout } from "@mui/icons-material"; |
| 3 | +import { Button, Stack, Tab, Tabs, TextField, Typography } from "@mui/material"; |
| 4 | +import * as React from "react"; |
| 5 | +import { useNavigate } from "react-router-dom"; |
| 6 | + |
| 7 | +import { addErrorSnackbar, addSnackbar } from "../../../utils/snackbar"; |
| 8 | + |
| 9 | +type ChangePasswordFormType = { |
| 10 | + old_password: string; |
| 11 | + new_password: string; |
| 12 | + new_password_confirm: string; |
| 13 | +}; |
| 14 | + |
| 15 | +export const AccountManagementPage: React.FC = () => { |
| 16 | + const changePasswordFormRef = React.useRef<HTMLFormElement>(null); |
| 17 | + const [pageState, setPageState] = React.useState<{ tab: number }>({ tab: 0 }); |
| 18 | + const navigate = useNavigate(); |
| 19 | + const backendAdminAPIClient = Common.Hooks.BackendAdminAPI.useBackendAdminClient(); |
| 20 | + const signOutMutation = Common.Hooks.BackendAdminAPI.useSignOutMutation(backendAdminAPIClient); |
| 21 | + const changePasswordMutation = Common.Hooks.BackendAdminAPI.useChangePasswordMutation(backendAdminAPIClient); |
| 22 | + |
| 23 | + const setTab = (_: React.SyntheticEvent, tab: number) => setPageState((ps) => ({ ...ps, tab })); |
| 24 | + |
| 25 | + const handleSignOut = () => { |
| 26 | + signOutMutation.mutate(undefined, { |
| 27 | + onSuccess: () => { |
| 28 | + addSnackbar("로그아웃 되었습니다.", "success"); |
| 29 | + navigate("/"); |
| 30 | + }, |
| 31 | + onError: addErrorSnackbar, |
| 32 | + }); |
| 33 | + }; |
| 34 | + |
| 35 | + const handleChangePassword = (event: React.FormEvent<HTMLFormElement>) => { |
| 36 | + event.preventDefault(); |
| 37 | + event.stopPropagation(); |
| 38 | + |
| 39 | + const form = changePasswordFormRef.current; |
| 40 | + if (!Common.Utils.isFormValid(form)) { |
| 41 | + addSnackbar("폼에 오류가 있습니다. 다시 확인해주세요.", "error"); |
| 42 | + return; |
| 43 | + } |
| 44 | + |
| 45 | + const formData = Common.Utils.getFormValue<ChangePasswordFormType>({ form }); |
| 46 | + if (formData.new_password !== formData.new_password_confirm) { |
| 47 | + addSnackbar("새 비밀번호와 확인 비밀번호가 일치하지 않습니다.", "error"); |
| 48 | + return; |
| 49 | + } |
| 50 | + |
| 51 | + changePasswordMutation.mutate(formData, { |
| 52 | + onSuccess: () => { |
| 53 | + addSnackbar("비밀번호가 변경되었습니다.", "success"); |
| 54 | + navigate("/"); |
| 55 | + }, |
| 56 | + onError: addErrorSnackbar, |
| 57 | + }); |
| 58 | + }; |
| 59 | + |
| 60 | + React.useEffect(() => { |
| 61 | + (async () => { |
| 62 | + const userInfo = await Common.BackendAdminAPIs.me(backendAdminAPIClient)(); |
| 63 | + if (!userInfo) { |
| 64 | + addSnackbar("로그아웃 상태입니다!", "error"); |
| 65 | + navigate("/"); |
| 66 | + } |
| 67 | + })(); |
| 68 | + }, [backendAdminAPIClient, navigate]); |
| 69 | + |
| 70 | + const disabled = signOutMutation.isPending || changePasswordMutation.isPending; |
| 71 | + |
| 72 | + return ( |
| 73 | + <Stack |
| 74 | + sx={{ |
| 75 | + width: "100%", |
| 76 | + height: "100%", |
| 77 | + minHeight: "100%", |
| 78 | + maxHeight: "100%", |
| 79 | + flexGrow: 1, |
| 80 | + }} |
| 81 | + justifyContent="center" |
| 82 | + alignItems="center" |
| 83 | + spacing={2} |
| 84 | + > |
| 85 | + <Tabs value={pageState.tab} onChange={setTab}> |
| 86 | + <Tab wrapped label="비밀번호 변경" /> |
| 87 | + <Tab wrapped label="로그아웃" /> |
| 88 | + </Tabs> |
| 89 | + |
| 90 | + {pageState.tab === 0 && ( |
| 91 | + <Stack sx={{ width: "100%", maxWidth: "600px", textAlign: "center" }}> |
| 92 | + <Typography variant="h5">비밀번호 변경</Typography> |
| 93 | + <br /> |
| 94 | + <form ref={changePasswordFormRef} onSubmit={handleChangePassword}> |
| 95 | + <Stack spacing={2}> |
| 96 | + <TextField |
| 97 | + disabled={disabled} |
| 98 | + name="old_password" |
| 99 | + type="password" |
| 100 | + label="현재 비밀번호" |
| 101 | + required |
| 102 | + fullWidth |
| 103 | + /> |
| 104 | + <TextField |
| 105 | + disabled={disabled} |
| 106 | + name="new_password" |
| 107 | + type="password" |
| 108 | + label="새 비밀번호" |
| 109 | + required |
| 110 | + fullWidth |
| 111 | + /> |
| 112 | + <TextField |
| 113 | + disabled={disabled} |
| 114 | + name="new_password_confirm" |
| 115 | + type="password" |
| 116 | + label="새 비밀번호 확인" |
| 117 | + required |
| 118 | + fullWidth |
| 119 | + /> |
| 120 | + <Button type="submit" variant="contained" disabled={disabled} fullWidth> |
| 121 | + 비밀번호 변경 |
| 122 | + </Button> |
| 123 | + </Stack> |
| 124 | + </form> |
| 125 | + </Stack> |
| 126 | + )} |
| 127 | + {pageState.tab === 1 && ( |
| 128 | + <> |
| 129 | + <Typography variant="h5">정말 로그아웃하시겠습니까?</Typography> |
| 130 | + <br /> |
| 131 | + <Button |
| 132 | + variant="contained" |
| 133 | + onClick={handleSignOut} |
| 134 | + disabled={signOutMutation.isPending} |
| 135 | + startIcon={<Logout />} |
| 136 | + > |
| 137 | + 로그아웃 |
| 138 | + </Button> |
| 139 | + </> |
| 140 | + )} |
| 141 | + </Stack> |
| 142 | + ); |
| 143 | +}; |
0 commit comments