diff --git a/dictation_client/src/pages/LicensePage/index.tsx b/dictation_client/src/pages/LicensePage/index.tsx index d6a957c..72c2d3d 100644 --- a/dictation_client/src/pages/LicensePage/index.tsx +++ b/dictation_client/src/pages/LicensePage/index.tsx @@ -1,106 +1,38 @@ -import { useMsal } from "@azure/msal-react"; -import React, { useCallback, useState } from "react"; -import { AppDispatch } from "app/store"; -import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; -import Footer from "components/footer"; -import Header from "components/header"; -import { clearToken } from "features/auth"; +import React, { useCallback } from "react"; +import { loadAccessToken } from "features/auth/utils"; +import { decodeToken } from "common/decodeToken"; import { useDispatch } from "react-redux"; -import styles from "styles/app.module.scss"; -import { getTranslationID } from "translation"; -import { useTranslation } from "react-i18next"; -import postAdd from "../../assets/images/post_add.svg"; -import history from "../../assets/images/history.svg"; -import key from "../../assets/images/key.svg"; -import { LicenseOrderPopup } from "./licenseOrderPopup"; +import { AppDispatch } from "app/store"; +import { clearToken } from "features/auth"; +import { useMsal } from "@azure/msal-react"; +import { Token } from "common/token"; +import LicenseSummary from "./licenseSummary"; +import PartnerLicense from "./partnerLicense"; const LicensePage: React.FC = (): JSX.Element => { - const { instance } = useMsal(); + const jwt = loadAccessToken(); const dispatch: AppDispatch = useDispatch(); - const [t] = useTranslation(); + const { instance } = useMsal(); - const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false); + const redirectToTopPage = useCallback(() => { + dispatch(clearToken()); + instance.logout({ + postLogoutRedirectUri: "/", + }); + }, [dispatch, instance]); - const onlicenseOrderOpen = useCallback(() => { - setIslicenseOrderPopupOpen(true); - }, [setIslicenseOrderPopupOpen]); + const token = decodeToken(jwt ?? ""); + // 不正なアクセストークンの場合はトップページに遷移する + if (!token) { + redirectToTopPage(); + } + const { tier } = token as Token; - return ( - <> - {/* isPopupOpenがfalseの場合はポップアップのhtmlを生成しないように対応。これによりポップアップは都度生成されて初期化の考慮が減る */} - {islicenseOrderPopupOpen && ( - { - setIslicenseOrderPopupOpen(false); - }} - /> - )} - {/* TODO 現状(PBI1221)はライセンス注文PUを起動するためのボタンのみ。別途ライセンス注文を実装するPBIで全般的に見直し。 */} -
-
- - -
-
-
-

- {t(getTranslationID("LicensePage.label.title"))} -

-
-
-
-

- {t(getTranslationID("LicensePage.label.subTitle"))} -

- -
-
-
-
- - {/* TODO 画面デザインにはないが、試験時に便利なので配置しておく。ライセンス注文を実装するPBIで正式なサインアウトのレイアウトに直す */} -
- -
-
-
- - ); + if (tier === 5) { + // 第五階層とそれ以外で表示画面を振り分ける + return ; + } + return ; }; export default LicensePage; diff --git a/dictation_client/src/pages/LicensePage/licenseSummary.tsx b/dictation_client/src/pages/LicensePage/licenseSummary.tsx new file mode 100644 index 0000000..8294fa9 --- /dev/null +++ b/dictation_client/src/pages/LicensePage/licenseSummary.tsx @@ -0,0 +1,106 @@ +import { useMsal } from "@azure/msal-react"; +import React, { useCallback, useState } from "react"; +import { AppDispatch } from "app/store"; +import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; +import Footer from "components/footer"; +import Header from "components/header"; +import { clearToken } from "features/auth"; +import { useDispatch } from "react-redux"; +import styles from "styles/app.module.scss"; +import { getTranslationID } from "translation"; +import { useTranslation } from "react-i18next"; +import postAdd from "../../assets/images/post_add.svg"; +import history from "../../assets/images/history.svg"; +import key from "../../assets/images/key.svg"; +import { LicenseOrderPopup } from "./licenseOrderPopup"; + +const LicenseSummary: React.FC = (): JSX.Element => { + const { instance } = useMsal(); + const dispatch: AppDispatch = useDispatch(); + const [t] = useTranslation(); + + const [islicenseOrderPopupOpen, setIslicenseOrderPopupOpen] = useState(false); + + const onlicenseOrderOpen = useCallback(() => { + setIslicenseOrderPopupOpen(true); + }, [setIslicenseOrderPopupOpen]); + + return ( + <> + {/* isPopupOpenがfalseの場合はポップアップのhtmlを生成しないように対応。これによりポップアップは都度生成されて初期化の考慮が減る */} + {islicenseOrderPopupOpen && ( + { + setIslicenseOrderPopupOpen(false); + }} + /> + )} + {/* TODO 現状(PBI1221)はライセンス注文PUを起動するためのボタンのみ。別途ライセンス注文を実装するPBIで全般的に見直し。 */} +
+
+ + +
+
+
+

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

+
+
+
+

+ {t(getTranslationID("LicensePage.label.subTitle"))} +

+ +
+
+
+
+ + {/* TODO 画面デザインにはないが、試験時に便利なので配置しておく。ライセンス注文を実装するPBIで正式なサインアウトのレイアウトに直す */} +
+ +
+
+
+ + ); +}; + +export default LicenseSummary; diff --git a/dictation_client/src/pages/LicensePage/partnerLicense.tsx b/dictation_client/src/pages/LicensePage/partnerLicense.tsx new file mode 100644 index 0000000..581aff8 --- /dev/null +++ b/dictation_client/src/pages/LicensePage/partnerLicense.tsx @@ -0,0 +1,44 @@ +import { useMsal } from "@azure/msal-react"; +import React from "react"; +import Footer from "components/footer"; +import Header from "components/header"; +import styles from "styles/app.module.scss"; +import { UpdateTokenTimer } from "components/auth/updateTokenTimer"; +import { clearToken } from "features/auth"; +import { useDispatch } from "react-redux"; +import { AppDispatch } from "app/store"; + +const PartnerLicense: React.FC = (): JSX.Element => { + const { instance } = useMsal(); + const dispatch: AppDispatch = useDispatch(); + + return ( + // 表示確認用の仮画面 +
+
+ +
+
+
+

第一~四階層です

+
+
+
+
+ +
{" "} +
+ ); +}; + +export default PartnerLicense;