120 lines
4.3 KiB
TypeScript
120 lines
4.3 KiB
TypeScript
import { useMsal } from "@azure/msal-react";
|
|
import { loginRequest } from "common/msalConfig";
|
|
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 { AppDispatch } from "app/store";
|
|
import { useDispatch } from "react-redux";
|
|
import { closeSnackbar, openSnackbar } from "features/ui";
|
|
import { useLocation, useNavigate } from "react-router-dom";
|
|
import styles from "styles/app.module.scss";
|
|
import { LANGUAGE_LIST } from "../../features/top/constants";
|
|
import arrow_forward from "../../assets/images/arrow_forward.svg";
|
|
import arrow_forward_bule from "../../assets/images/arrow_forward_blue.svg";
|
|
import oDMScloud from "../../assets/images/ODMScloud.png";
|
|
|
|
const TopPage: React.FC = (): JSX.Element => {
|
|
const { instance } = useMsal();
|
|
// eslint-disable-next-line
|
|
const [t, i18n] = useTranslation();
|
|
const dispatch: AppDispatch = useDispatch();
|
|
const { search } = useLocation();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const query = new URLSearchParams(search);
|
|
const logout = query.get("logout");
|
|
if (logout) {
|
|
dispatch(closeSnackbar());
|
|
dispatch(
|
|
openSnackbar({
|
|
level: "error",
|
|
message: getTranslationID("topPage.message.logout"),
|
|
})
|
|
);
|
|
navigate("/", { replace: true });
|
|
}
|
|
}, [dispatch, search, navigate]);
|
|
|
|
return (
|
|
<div className={`${styles.wrap} ${styles.home}`}>
|
|
<Header />
|
|
|
|
<main className={`${styles.main} ${styles.home}`}>
|
|
<section className={`${styles.pgHome}`}>
|
|
<p className={styles.ODMSlogo}>
|
|
<img
|
|
src={`${oDMScloud}?0609`}
|
|
alt={t(getTranslationID("topPage.label.logoAlt"))}
|
|
/>
|
|
</p>
|
|
<div>
|
|
<dl className={`${styles.pgHomeLinks}`}>
|
|
<dt>
|
|
{`${t(getTranslationID("topPage.label.displayLanguage"))} :`}
|
|
</dt>
|
|
<dd className={`${styles.marginBtm3}`}>
|
|
<select
|
|
className={`${styles.formInput}`}
|
|
value={i18n.language}
|
|
onChange={(e) => {
|
|
i18n.changeLanguage(e.currentTarget.value);
|
|
// 既にcookieに選択言語があれば削除
|
|
document.cookie = "language=; max-age=0";
|
|
// cookieの期限は1年
|
|
document.cookie = `language=${e.currentTarget.value}; max-age=31536000`;
|
|
}}
|
|
>
|
|
{LANGUAGE_LIST.map((x) => (
|
|
<option key={x.value} value={x.value}>
|
|
{t(x.label)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</dd>
|
|
<dt>{t(getTranslationID("topPage.label.alreadyHaveAccount"))}</dt>
|
|
<dd className={`${styles.marginBtm2}`}>
|
|
{/* eslint-disable */}
|
|
<a
|
|
className={`${styles.buttonNormal}`}
|
|
onClick={() => {
|
|
// AADB2Cのサインイン画面に言語選択情報を渡す追加のクエリパラメータを設定
|
|
loginRequest.extraQueryParameters = {
|
|
ui_locales: i18n.language,
|
|
};
|
|
instance.loginRedirect(loginRequest);
|
|
}}
|
|
data-tag="signin"
|
|
>
|
|
{t(getTranslationID("topPage.label.signInButton"))}
|
|
<img
|
|
src={arrow_forward}
|
|
alt=""
|
|
className={`${styles.buttonIcon}`}
|
|
/>
|
|
</a>
|
|
</dd>
|
|
<dt>{t(getTranslationID("topPage.label.newUser"))}</dt>
|
|
<dd className={`${styles.marginBtm1}`}>
|
|
<a href="/signup" className={`${styles.buttonBase}`}>
|
|
{t(getTranslationID("topPage.label.signUpButton"))}
|
|
<img
|
|
src={arrow_forward_bule}
|
|
alt=""
|
|
className={`${styles.buttonIcon}`}
|
|
/>
|
|
</a>
|
|
</dd>
|
|
</dl>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
<Footer />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TopPage;
|