diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx index 8cfed31..cf6e1d3 100644 --- a/dictation_client/src/AppRouter.tsx +++ b/dictation_client/src/AppRouter.tsx @@ -21,6 +21,7 @@ import TypistGroupSettingPage from "pages/TypistGroupSettingPage"; import WorktypeIdSettingPage from "pages/WorkTypeIdSettingPage"; import AccountPage from "pages/AccountPage"; import { TemplateFilePage } from "pages/TemplateFilePage"; +import { AccountDeleteSuccess } from "pages/AccountPage/accountDeleteSuccess"; const AppRouter: React.FC = () => ( @@ -81,6 +82,8 @@ const AppRouter: React.FC = () => ( path="/partners" element={} />} /> + } /> + } /> ); diff --git a/dictation_client/src/pages/AccountPage/accountDeleteSuccess.tsx b/dictation_client/src/pages/AccountPage/accountDeleteSuccess.tsx new file mode 100644 index 0000000..790af01 --- /dev/null +++ b/dictation_client/src/pages/AccountPage/accountDeleteSuccess.tsx @@ -0,0 +1,54 @@ +import React, { useEffect } from "react"; +import { useTranslation } from "react-i18next"; +import { getTranslationID } from "translation"; +import Header from "components/header"; +import Footer from "components/footer"; +import styles from "styles/app.module.scss"; +import { Link } from "react-router-dom"; +import { clearToken } from "features/auth"; +import { AppDispatch } from "app/store"; +import { useDispatch } from "react-redux"; + +export const AccountDeleteSuccess: React.FC = (): JSX.Element => { + const { t } = useTranslation(); + const dispatch: AppDispatch = useDispatch(); + + // アカウントの削除完了時に遷移するページなので、遷移と同時にログアウト状態とする + useEffect(() => { + dispatch(clearToken()); + }, [dispatch]); + + return ( +
+
+
+
+
+

+ {t(getTranslationID("accountDeleteSuccess.label.title"))} +

+
+ +
+
+
+
+ {t(getTranslationID("accountDeleteSuccess.label.message"))} +
+
+ + {t( + getTranslationID( + "accountDeleteSuccess.label.backToTopPageLink" + ) + )} + +
+
+
+
+
+
+ ); +}; diff --git a/dictation_client/src/pages/AccountPage/deleteAccountPopup.tsx b/dictation_client/src/pages/AccountPage/deleteAccountPopup.tsx index 0d94684..2fcb13c 100644 --- a/dictation_client/src/pages/AccountPage/deleteAccountPopup.tsx +++ b/dictation_client/src/pages/AccountPage/deleteAccountPopup.tsx @@ -2,18 +2,19 @@ import React, { useCallback } from "react"; import { useTranslation } from "react-i18next"; import { AppDispatch } from "app/store"; import { useDispatch, useSelector } from "react-redux"; +import { selectAccountInfo, selectIsLoading } from "features/account"; +import { deleteAccountAsync } from "features/account/operations"; +import { useMsal } from "@azure/msal-react"; import styles from "../../styles/app.module.scss"; import { getTranslationID } from "../../translation"; import close from "../../assets/images/close.svg"; import deleteButton from "../../assets/images/delete.svg"; -import { selectAccountInfo, selectIsLoading } from "features/account"; -import { deleteAccountAsync } from "features/account/operations"; -interface deleteAccountPopupProps { +interface DeleteAccountPopupProps { onClose: () => void; } -export const DeleteAccountPopup: React.FC = ( +export const DeleteAccountPopup: React.FC = ( props ) => { const { onClose } = props; @@ -21,6 +22,8 @@ export const DeleteAccountPopup: React.FC = ( const dispatch: AppDispatch = useDispatch(); const isLoading = useSelector(selectIsLoading); + const { instance } = useMsal(); + const accountInfo = useSelector(selectAccountInfo); // ポップアップを閉じる処理 @@ -31,13 +34,21 @@ export const DeleteAccountPopup: React.FC = ( onClose(); }, [isLoading, onClose]); - const onDeleteAccount = useCallback(() => { - dispatch( + const onDeleteAccount = useCallback(async () => { + const { meta } = await dispatch( deleteAccountAsync({ accountId: accountInfo.account.accountId, }) ); - }, [dispatch]); + + // 削除成功後にAccountDeleteSuccess ページに遷移 + if (meta.requestStatus === "fulfilled") { + instance.logoutRedirect({ + postLogoutRedirectUri: "/accountDeleteSuccess", + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [instance]); // HTML return ( @@ -74,7 +85,7 @@ export const DeleteAccountPopup: React.FC = (