diff --git a/dictation_client/src/AppRouter.tsx b/dictation_client/src/AppRouter.tsx index 03a581c..7e6362a 100644 --- a/dictation_client/src/AppRouter.tsx +++ b/dictation_client/src/AppRouter.tsx @@ -13,6 +13,7 @@ import VerifyFailedPage from "pages/VerifyFailedPage"; import VerifyAlreadyExistPage from "pages/VerifyAlreadyExistPage"; import SignupCompletePage from "pages/SignupCompletePage"; import UserListPage from "pages/UserListPage"; +import LicensePage from "pages/LicensePage"; const AppRouter: React.FC = () => ( @@ -36,6 +37,11 @@ const AppRouter: React.FC = () => ( path="/user" element={} />} /> + + {/* XXX 本来{}とすべきだが、タスク1786により + 多言語でのログインが出来なく、多言語対応の確認ができないため一時的に外す + タスク1789で対応予定 */} + } /> } />} @@ -49,10 +55,6 @@ const AppRouter: React.FC = () => ( path="/dictations" element={} />} /> - } />} - /> } />} diff --git a/dictation_client/src/assets/images/history.svg b/dictation_client/src/assets/images/history.svg new file mode 100644 index 0000000..d108bf4 --- /dev/null +++ b/dictation_client/src/assets/images/history.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/dictation_client/src/assets/images/key.svg b/dictation_client/src/assets/images/key.svg new file mode 100644 index 0000000..e86e331 --- /dev/null +++ b/dictation_client/src/assets/images/key.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/dictation_client/src/assets/images/post_add.svg b/dictation_client/src/assets/images/post_add.svg new file mode 100644 index 0000000..675731a --- /dev/null +++ b/dictation_client/src/assets/images/post_add.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/dictation_client/src/pages/LicensePage/index.tsx b/dictation_client/src/pages/LicensePage/index.tsx new file mode 100644 index 0000000..7acc098 --- /dev/null +++ b/dictation_client/src/pages/LicensePage/index.tsx @@ -0,0 +1,89 @@ +import { useMsal } from "@azure/msal-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 from "react"; +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"; + +// eslintの検査エラー無視設定 +/* eslint-disable jsx-a11y/anchor-is-valid */ + +const LicensePage: React.FC = (): JSX.Element => { + const { instance } = useMsal(); + const dispatch: AppDispatch = useDispatch(); + const [t] = useTranslation(); + + return ( + /* TODO 現状（PBI1221）はライセンス注文PUを起動するためのボタンのみ。別途ライセンス注文を実装するPBIで全般的に見直し。 */ +
+
+ + +
+
+
+

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

+
+
+
+

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

+ +
+
+
+
+ + {/* TODO 画面デザインにはないが、試験時に便利なので配置しておく。ライセンス注文を実装するPBIで正式なサインアウトのレイアウトに直す */} +
+ +
+
+ ); +}; + +export default LicensePage; diff --git a/dictation_client/src/styles/app.module.scss b/dictation_client/src/styles/app.module.scss index 2a1d0ed..4e0abe3 100644 --- a/dictation_client/src/styles/app.module.scss +++ b/dictation_client/src/styles/app.module.scss @@ -796,27 +796,49 @@ _:-ms-lang(x)::-ms-backdrop, width: auto; } -.user > div { +.user > div, +.license > div { padding: 0 2rem; } -.user .table tr:not(.tableHeader) { +.user .table tr:not(.tableHeader), +.license .table tr:not(.tableHeader) { cursor: pointer; + position: relative; } -.user .table tr:not(.tableHeader):hover { - color: #0084b2; +.user .table tr:not(.tableHeader):hover .tdEx, +.license .table tr:not(.tableHeader):hover .tdEx { + opacity: 1; } -.user .table tr:not(.tableHeader).isSelected { +.user .table tr:not(.tableHeader).isSelected, +.license .table tr:not(.tableHeader).isSelected { background: #0084b2; color: #ffffff; } -.user .table tr:not(.tableHeader).isSelected:hover { +.user .table tr:not(.tableHeader).isSelected:hover, +.license .table tr:not(.tableHeader).isSelected:hover { color: #ffffff; } -.user .table td { +.user .table td:not(.tdEx), +.license .table td:not(.tdEx) { max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + padding-bottom: 2rem; +} +.user .table td.tdEx, +.license .table td.tdEx { + display: block; + width: 100%; + padding: 0 0.5rem; + position: absolute; + left: 0; + bottom: 0.5rem; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + opacity: 0; } .menuAction { diff --git a/dictation_client/src/styles/app.module.scss.d.ts b/dictation_client/src/styles/app.module.scss.d.ts index 3756c2c..11b807b 100644 --- a/dictation_client/src/styles/app.module.scss.d.ts +++ b/dictation_client/src/styles/app.module.scss.d.ts @@ -64,6 +64,7 @@ declare const classNames: { readonly pgHomeLinks: "pgHomeLinks"; readonly buttonIcon: "buttonIcon"; readonly user: "user"; + readonly license: "license"; readonly isSelected: "isSelected"; readonly menuAction: "menuAction"; readonly menuLink: "menuLink"; diff --git a/dictation_client/src/translation/de.json b/dictation_client/src/translation/de.json index 6c27146..39b4999 100644 --- a/dictation_client/src/translation/de.json +++ b/dictation_client/src/translation/de.json @@ -127,5 +127,14 @@ "transcriptionist": "(de)Transcriptionist", "none": "(de)None" } + }, + "LicensePage": { + "label": { + "title": "(de)License", + "subTitle": "(de)EFGI Legal", + "orderLicense": "(de)Order License", + "orderHistory": "(de)Order History", + "importLicenseKey": "(de)Import License Key" + } } -} +} \ No newline at end of file diff --git a/dictation_client/src/translation/en.json b/dictation_client/src/translation/en.json index cf937a8..f4d70c4 100644 --- a/dictation_client/src/translation/en.json +++ b/dictation_client/src/translation/en.json @@ -127,5 +127,14 @@ "transcriptionist": "Transcriptionist", "none": "None" } + }, + "LicensePage": { + "label": { + "title": "License", + "subTitle": "EFGI Legal", + "orderLicense": "Order License", + "orderHistory": "Order History", + "importLicenseKey": "Import License Key" + } } -} +} \ No newline at end of file diff --git a/dictation_client/src/translation/es.json b/dictation_client/src/translation/es.json index ece7341..4ac6865 100644 --- a/dictation_client/src/translation/es.json +++ b/dictation_client/src/translation/es.json @@ -127,5 +127,14 @@ "transcriptionist": "(es)Transcriptionist", "none": "(es)None" } + }, + "LicensePage": { + "label": { + "title": "(es)License", + "subTitle": "(es)EFGI Legal", + "orderLicense": "(es)Order License", + "orderHistory": "(es)Order History", + "importLicenseKey": "(es)Import License Key" + } } -} +} \ No newline at end of file diff --git a/dictation_client/src/translation/fr.json b/dictation_client/src/translation/fr.json index 5199abf..16a0fda 100644 --- a/dictation_client/src/translation/fr.json +++ b/dictation_client/src/translation/fr.json @@ -127,5 +127,14 @@ "transcriptionist": "(fr)Transcriptionist", "none": "(fr)None" } + }, + "LicensePage": { + "label": { + "title": "(fr)License", + "subTitle": "(fr)EFGI Legal", + "orderLicense": "(fr)Order License", + "orderHistory": "(fr)Order History", + "importLicenseKey": "(fr)Import License Key" + } } -} +} \ No newline at end of file