From 5cfe069b5845475a3e82e5569f524f06aa8e2cdd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=B0=B4=E6=9C=AC=20=E7=A5=90=E5=B8=8C?= Date: Mon, 2 Oct 2023 01:19:18 +0000 Subject: [PATCH] =?UTF-8?q?Merged=20PR=20444:=20=E7=94=BB=E9=9D=A2?= =?UTF-8?q?=E5=AE=9F=E8=A3=85=EF=BC=88=E3=82=A2=E3=82=AB=E3=82=A6=E3=83=B3?= =?UTF-8?q?=E3=83=88=E5=89=8A=E9=99=A4=E6=88=90=E5=8A=9F=E3=83=9A=E3=83=BC?= =?UTF-8?q?=E3=82=B8=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## 概要 [Task2715: 画面実装（アカウント削除成功ページ）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2715) - 元PBI or タスクへのリンク（内容・目的などはそちらにあるはず） - 何をどう変更したか、追加したライブラリなど ・アカウント削除成功後に、アカウント削除成功ページに遷移するよう実装 ・ログオフ状態にする - このPull Requestでの対象/対象外 - 影響範囲（他の機能にも影響があるか） ## レビューポイント - 特にレビューしてほしい箇所 ・レイアウトやメッセージの文言 ・ログオフ状態にするタイミング →Back to TOP Pageを押下時にログオフ状態になるようにしています ・Delete Accountボタン（ポップアップ上の）押下時のページ遷移のコード ・その他、漏れがないか - 軽微なものや自明なものは記載不要 - 修正範囲が大きい場合などに記載 - 全体的にや仕様を満たしているか等は本当に必要な時のみ記載 ## UIの変更 - Before/Afterのスクショなど - スクショ置き場 https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2715?csf=1&web=1&e=0M85t6 ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば --- dictation_client/src/AppRouter.tsx | 3 ++ .../AccountPage/accountDeleteSuccess.tsx | 54 +++++++++++++++++++ .../pages/AccountPage/deleteAccountPopup.tsx | 27 +++++++--- dictation_client/src/translation/de.json | 7 +++ dictation_client/src/translation/en.json | 7 +++ dictation_client/src/translation/es.json | 7 +++ dictation_client/src/translation/fr.json | 7 +++ 7 files changed, 104 insertions(+), 8 deletions(-) create mode 100644 dictation_client/src/pages/AccountPage/accountDeleteSuccess.tsx 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 = (